1

この男がやろうとしていることと非常によく似た何かをD3でやりたいと思っています:

追加/挿入後にenter()選択を再利用できますか?

複数の (行と) 列のデータがあり、データのすべての部分を複数の要素にバインドする必要があります。上記でリンクした質問への回答は、これが入力選択でどのように機能するかを説明していますが、更新選択ではどうですか?

基本的に、更新選択で属性を設定する方法や、現在どのデータに属性が設定されているかなどを知る必要があります。これに関する例やドキュメントはどこにも見つかりません。



編集：さて、私は一般的にそれを機能させました。ただし、根本的な問題が 1 つ残っています。"data" 関数呼び出しに渡すデータ配列は正しいのに、"update" 選択に渡される値は正しくありません。

私はそれを少しデバッグしました。何が起こっているのか分かっていると思います: 出口選択で間違ったデータが削除されています。これを修正するにはどうすればよいですか。つまり、古いデータが削除され、新しい「データ」関数呼び出しで繰り返されるデータがそのまま残ることを確認するにはどうすればよいですか?

明確にするために、これが（「データ」関数呼び出しに）渡すデータであるとしましょう：

1、2、3
4、5、6

次回はこれを渡すとしましょう：

4、5、6

何らかの理由で、これは結果のデータです:

1、2、3

など。どうすればこれを修正できますか、またはこれは発生するはずがなく、何か間違ったことをしているために発生しているだけですか?

また、「data」関数を呼び出す前に、すべての「g」要素を選択して削除すると、役立つ場合があります。

svg.selectAll("g").remove();

svg.selectAll("g").data(data);

その後、この問題は発生しません。明らかに、これはエレガントなソリューションではありません。

4

1 に答える 1

4

リンクした質問のコード例を続けると、追加された行を再選択する必要があります。

var g = svg.selectAll(".foo")
    .data([123, 456]);

var gEnter = g.enter().append("g")
    .attr("class", "foo");

gEnter.append("line"); // line1
gEnter.append("line"); // line2

var line = g.selectAll("line"); // line1 and line2

(line1 または line2 を別々に変更する場合は、別々のクラスまたは識別属性を割り当てます。)

概念的には、データ結合の結果として、親 G 要素には開始、更新、および終了の選択があります。入力する G に子要素を追加する場合は、それらを再選択して、子の結合された入力 + 更新選択を作成する必要があります。

于 2012-08-15T05:12:58.673 に答える