1

折れ線グラフ上の点に円を付けるためのこのコードがあります。

svg.selectAll("dot")
    .data(newdata)
   .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("r", 4)
    .attr("cx", function(d) { return x(newdate(d.key)); })
    .attr("cy", function(d) { return y(d.values.mean); })
    .attr("fill", "#8cc13f")
    .on("mouseover", function(d) {
        div.transition()
            .duration(200)
            .style("opacity", .9);    
        div.html("Date taken:" + "  " + newdate(d.key) + "<br/>" + "<br/>" +
                 "Average Reading:" + "  " + d.values.mean + "<br/>" + "<br/>" +
                 "Parameter:" +  "  " + selectedParameter)
           .style("left", (d3.event.pageX) + "px")
           .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout", function(d) {
        div.transition()
            .duration(500)
            .style("opacity", 0);
    });

..そして、以下を使用してグラフを更新するときに、これらの円を遷移させようとしています。

var circle = svg.selectAll("dot")
    .data(newdata);

circle
    .enter()
    .append("circle")
    .data(newdata)
    .transition()
    .duration(750)
    .attr("cx", function(d) { return x(newdate(d.key)); })
    .attr("cy", function(d) { return y(d.values.mean); })
    .attr("r", 4)
    .attr("fill", "#8cc13f");

circle
    .exit()
    .transition()
    .duration(750)
    .attr('opacity',0)
    .remove();

新しいサークルが追加されている間、結合は機能していますが、何らかの理由で古いサークルは削除されていませんか？誰か助けてもらえますか？

4

1 に答える 1

1

ここでの問題は、D3が最初のデータバインディングからのデータを2番目のデータバインディングに一致させる方法を知らないことです（デフォルトでは、データ配列のインデックスを使用するだけです）。データバインディングにキー関数を追加すると、これが解決され、D3がどのように機能するかが定義されます。データを一致させます。データキーの詳細については、MikeBostockの優れたObjectConstancyチュートリアルを参照してください。

于 2013-03-14T01:40:48.270 に答える