3

selectAll + data + enter + append が最初は正常に機能する理由を誰かが説明できますが、もう一度呼び出すと、単一の要素のみが追加されますか?

http://jsfiddle.net/scottieb/wQJen/

私が走るとき

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
   .attr("cx", function(d) { return x(d.x)})
   .attr("cy", function(d) { return y(d.y)})
   .attr("fill", "red").attr("r", 15);

4 つのポイントを取得します (「datafiltered.」の 4 つのデータ ペアに対応)。しかし、ボタンをクリックすると、実行されます

vis.selectAll("circle")
    .data(datafiltered2)
    .enter().append("svg:circle")
    .attr("cx", function(d) {
        return x(d.x)
    }).attr("cy", function(d) {
        return y(d.y)
    }).attr("fill", "black").attr("r", 5);

'datafiltered2' の最後の要素 (この 5 つのペア) のみを追加します。したがって、データは異なり、ボタンをクリックすると2番目のデータが発生しますが、なぜ1ポイントしか追加されないのかわかりません!

4

2 に答える 2

2

メソッドを呼び出した結果は、新しい要素.enter()のセットです。既存の要素には元の選択を使用します。D3 サイトのEnter and Exitを参照してください。

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();
于 2013-07-09T15:21:13.747 に答える
2

ここでの問題は、バインドしているデータにキー関数がないため、代わりに D3 がインデックスを使用することです。したがって、最初の 4 つの (既存の) 要素が新しいデータにバインドされ、5 番目の要素が 1 つ追加されます。

主な機能の詳細については、この最近のチュートリアルを参照してください: http://bost.ocks.org/mike/constancy/

おそらく、単一の要素を追加したいだけでなく、既存の要素を変更して、新しくバインドされたデータを表すようにしたい場合もあります。

于 2012-05-27T04:13:38.200 に答える