0

小さな黒い点の散布図であるd3.jsでプロットを作成しようとしています。小さな黒い点にカーソルを合わせると、元の黒に加えて、新しい半透明の大きな赤い点が同じ位置に表示されますドットであり、マウスが元の黒いドットの領域を離れると、赤いドットが消えます。

2つの問題があるようです。1 つ目は、赤い円が作成された瞬間に消えることです。.on("mouseleave")パーツ（メソッド？）を削除すると、赤い円が正常に表示されるため、作成されたことがわかりますが、もちろん残ります。

2 つ目の問題は、.on("mouseleave")パーツを取り外した状態で赤い円が表示されたときに、その大きな赤い円の陰になっている他の黒い点がいずれも独自の赤い円を生成しないことです。

「mouseenter」と「mouseleave」の代わりに「mouseover」と「mouseout」を使用してみましたが、同じ結果が得られました。誰かに提案があれば、私はそれらに感謝します。ありがとう！

関連するコードは次のとおりです。リクエストがあればさらに投稿しますが、重要な部分に焦点を当てたいと思っていました.

drawdots = function() {
    sg.selectAll("circle")
        .remove();
    sg.selectAll("circle")
        .data(df)
        .enter()
        .append("circle")
        .attr("cx", function(d) {return xScale(Math.log(d.x)/Math.log(10));})
        .attr("cy", function(d) {return yScale(Math.log(d.y)/Math.log(10));})
        .attr("fill", "black")
        .attr("id", function(d, i) {return "point" + i})
        .attr("r", 5)
        .on("mouseenter", function(d, i) {
            var cx = sg.select("#point" + i)
                        .attr("cx");
            var cy = sg.select("#point" + i)
                        .attr("cy");
            sg.append("circle")
                .attr("cx", cx)
                .attr("cy", cy)
                .attr("r", 20)
                .attr("fill", "red")
                .attr("opacity", 0.5)
                .attr("id", "red_circle" + i);
        })
        .on("mouseleave", function(d, i) {
            sg.select("#red_circle" + i)
                .remove();
        });
};
4

1 に答える 1

1

これを別の方法で実装します-赤い点を1つ持つ代わりに、黒い点ごとに1つ描画し、マウスオーバーでのみ表示します。これにより、基本的に次のようなコードが簡略化されます。

sg.selectAll("circle.black")
    .data(df)
    .enter()
    .append("circle")
    .attr("class", "black")
    .attr("cx", function(d) {return xScale(Math.log(d.x)/Math.log(10));})
    .attr("cy", function(d) {return yScale(Math.log(d.y)/Math.log(10));})
    .attr("fill", "black")
    .attr("id", function(d, i) {return "point" + i})
    .attr("r", 5);

sg.selectAll("circle.red")
    .data(df)
    .enter()
    .append("circle")
    .attr("class", "red")
    .attr("cx", function(d) {return xScale(Math.log(d.x)/Math.log(10));})
    .attr("cy", function(d) {return yScale(Math.log(d.y)/Math.log(10));})
    .attr("fill", "red")
    .attr("id", function(d, i) {return "red_circle" + i})
    .attr("r", 20)
    .attr("opacity", 0)
    .on("mouseenter", function() { d3.select(this).attr("opacity", 0.5); })
    .on("mouseleave", function() { d3.select(this).attr("opacity", 0); });
于 2013-04-12T19:37:51.050 に答える