2012-10-23 14 views
11

select()とselectAll()の違いは何ですか?select()とselectAll()の違い

なぜ、2番目のタグにpタグを追加しないのですか?

divSelection = d3.select('#div-vis').selectAll('p').data(['dummy']).enter().append('p'); 

divSelection = d3.select('#div-vis').select('p').data(['dummy']).enter().append('p'); 

答えて

14

Nested Selectionsより:

ネスト選択別の微妙まだ重大な副作用を有している:それは、各グループの親ノードを設定します。親ノードは、入力要素を追加する場所を決定する選択項目の隠しプロパティです。 ... selectとselectAllの間には重要な違いがあります:selectは既存のグループを保持しますが、selectAllは新しいグループを作成します。したがって、selectを呼び出すと、データ、インデックス、元の選択の親ノードまで保存されます!

d3.select("#vis")と言うとき、選択の親ノードは依然としてドキュメント要素です。 selectAll("p")と言うとき、selectAllはネスト演算子なので、親ノードを以前に選択した#vis要素として定義します。それはselectAllでのみ発生し、selectではありません。

<html> 
<body> 

    <div id="viz"> 
    </div> 

<body> 
</html> 

このコードを適用する:このHTML文書で

2

var viz = d3.select('#viz').selectAll('p').data([0]) 
    .enter().append('p'); 

この結果を与える:

<html> 
<body> 

    <div id="viz"> 
    <p></p> 
    </div> 

<body> 
</html> 

selectAll()が前に基づいて、親要素を定義するからですselectメソッドであり、これはselect('#viz')です。そのようにして:

console.log(viz[0].parentNode) // <div id="viz"> 

あなたが最初のHTML文書に次のコードを実行した場合一方:selectAll()以来

<html> 
<body> 

    <div id="viz"> 
    </div> 

<body> 
<p></p> <!-- your p element is appended to <html> as its parent element 
</html> 

をするために必要です:それはあなたにこの結果を与える

var viz = d3.select('#viz').select('p').data([0]) 
    .enter().append('p'); 

選択の親要素を再定義すると、選択の親要素はまだデフォルトで設定されている<html>です。我々は選択の親ノードをログに記録した場合:

console.log(viz[0].parentNode) // <html> 

selections are arrays (groups) of arrays of elementsことを覚えておいてください。 viz[0]を書くと、選択の最初の要素ではなく、最初の要素のグループが得られます。

console.log(viz[0][0].parentNode) 

ないあなたD3の選択グループでは、DOMツリーにあなたのその特定の要素の親要素を与える:あなたが書くべき最初の要素を取得するには。