2013-01-06 6 views
9

私は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); 

私はselectselectAllを変更しました。それでも動作しますが、svgの要素は、の後に、の後に追加されます。</body>タグ。 selectAllの元のコードは、<body>タグの後に追加します。

元のHTMLにはハードコードされた<svg>要素が含まれていないので、selectselectAllの両方が空の選択を返すと思います。だから私は彼らがなぜ異なる行動を起こすのか理解できません。

私は説明を探しています。ありがとう!

+0

さてあなたは、実際には複数のものに対処したい場合は、それが* 1つの*要素を選択しても意味がありません。ですから、私は '.select' +' .data'を使っても有効なユースケースにはならないと思います。 '.select'は、' '(HTMLルートノード)である' parentNode'と '.select( 'body')'の後に ''で選択された '.selectAll'で選択を作成しているようです。要素を 'html'に追加することは期待された動作ではないようですが、それは意図的なことかもしれません。私は作者に尋ねるでしょう、それはバグかもしれません。 –

+0

re:selectのuse-caseの有効性についてのあなたの意見は、私の理解ではselectとselectAllの両方がコレクションの一種である選択オブジェクトを返すということでした。 selectによって返されたコレクションが単一の要素を持つ(または空の)場合があります。両方の場合にdata()を適用することは有効です。その理解が間違っている場合は私を修正してください。 – Jonah

+0

.selectは、識別子に一致する最初の要素を取得するだけで、selectAllとは別に追加するべきではありません。私はGithubのバグとして投稿します。 – Elijah

答えて

3

選択/のSelectAllについてマイク・ボストックの記事をチェック:Nested Selections

引用すると:

を選択してのSelectAll重要な違いがあります:のSelectAllは、新しいグループを作成するのに対し、選択は、既存のグループを保存します。したがって、selectを呼び出すと、データ、インデックス、元の選択の親ノードまで保存されます!

7

selectとselectAllの基本的な違いは、selectAllはそれを保持しながら、既存の選択肢の階層を縮小することです。

したがって、selectAllを他のものの後に使用すると、結果は入れ子のforループのリストのようになります。

http://bost.ocks.org/mike/nest/

関連する問題