40

データ結合を使用して、データ要素ごとに 2 つの新しい要素を追加するシナリオがあります。

私はもともと次のようなことをしていました：

var y = d3.selectAll("line")
    .data([123, 456]);

y.enter().append("line");  // assume attr and style set
y.enter().append("line");

y.transition()...

よく考える前に、トランジションで使用される更新選択には、入力選択からのマージされた追加が含まれると予想していました。しかしもちろん、データ要素ごとの選択には 1 つのスロットしかないため、これは機能しませんでした。

そこで、同じ enter() 選択を 2 回使用するようにコードを変更しましたが、移行を行うために新しい要素を再選択しました。

このアプローチは機能しましたが、私の質問は、これが推奨される方法であるかどうかです。追加/挿入した後は、必ず enter() の使用を停止する必要がありますか? または、更新選択には最後に作成された要素のみが含まれることを覚えている限り、それを使用して複数の要素を作成しても問題ありませんか?

これが間違っていることが判明した場合、これを達成するためのより良い方法は何ですか?

4

1 に答える 1

64

いいえ。データ結合の目的は、要素をデータと同期し、必要に応じて要素を作成、削除、または更新することです。要素を2回作成すると、要素はバインドされたデータ配列と1対1で対応しなくなります。

2つの要素を各データに対応させる場合は、最初にグループ（G）要素を追加して、データから要素への1対1のマッピングを確立します。次に、必要に応じて子要素を追加します。結果の構造は次のようになります。

<g>
  <line class="line1"></line>
  <line class="line2"></line>
</g>
<g>
  <line class="line1"></line>
  <line class="line2"></line>
</g>

例えば：

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

var gEnter = g.enter().append("g");
gEnter.append("line").attr("class", "line1");
gEnter.append("line").attr("class", "line2");
于 2012-05-30T16:09:48.133 に答える