私はdrag multiples exampleで遊んでいます。私は説明できないことに気付きました。このスニペットでd3のselect()とselectAll()の動作が異なるのはなぜですか?
:
var svg = d3.select("body").selectAll("svg")
.data(d3.range(16).map(function() { return {x: width/2, y: height/2}; }))
.enter().append("svg")
.attr("width", width)
.attr("height", height);
私はselect
にselectAll
を変更しました。それでも動作しますが、svg
の要素は、の後に、の後に追加されます。</body>
タグ。 selectAll
の元のコードは、<body>
タグの後に追加します。
元のHTMLにはハードコードされた<svg>
要素が含まれていないので、select
とselectAll
の両方が空の選択を返すと思います。だから私は彼らがなぜ異なる行動を起こすのか理解できません。
私は説明を探しています。ありがとう!
さてあなたは、実際には複数のものに対処したい場合は、それが* 1つの*要素を選択しても意味がありません。ですから、私は '.select' +' .data'を使っても有効なユースケースにはならないと思います。 '.select'は、' '(HTMLルートノード)である' parentNode'と '.select( 'body')'の後に '
'で選択された '.selectAll'で選択を作成しているようです。要素を 'html'に追加することは期待された動作ではないようですが、それは意図的なことかもしれません。私は作者に尋ねるでしょう、それはバグかもしれません。 –re:selectのuse-caseの有効性についてのあなたの意見は、私の理解ではselectとselectAllの両方がコレクションの一種である選択オブジェクトを返すということでした。 selectによって返されたコレクションが単一の要素を持つ(または空の)場合があります。両方の場合にdata()を適用することは有効です。その理解が間違っている場合は私を修正してください。 – Jonah
.selectは、識別子に一致する最初の要素を取得するだけで、selectAllとは別に追加するべきではありません。私はGithubのバグとして投稿します。 – Elijah