13

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

2番目のものはapタグを追加しないのはなぜですか?

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

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

2 に答える 2

17

ネストされた選択から:

選択範囲のネストには、微妙ではあるが重大な副作用がもう 1 つあります。それは、各グループの親ノードを設定することです。親ノードは、入力要素をどこに追加するかを決定する選択の隠しプロパティです。… select と selectAll には重要な違いがあります。select は既存のグループ化を保持しますが、selectAll は新しいグループ化を作成します。したがって、select を呼び出すと、元の選択のデータ、インデックス、さらには親ノードも保持されます。

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

于 2012-10-23T15:15:58.950 に答える
3

この HTML ドキュメントでは:

<html>
<body>

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

<body>
</html>

このコードを適用する:

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

次の結果が得られます。

<html>
<body>

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

<body>
</html>

これは、前のメソッドである にselectAll()基づいて親要素を定義するためです。そうであれば：selectselect('#viz')

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

一方、最初の HTML ドキュメントで次のコードを実行すると:

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

次の結果が得られます。

<html>
<body>

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

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

選択の親要素を再定義するにはaselectAll()が必要であるため、選択の親要素は<html>デフォルトで設定されたままです。選択の親ノードをログに記録すると、次のようになります。

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

選択は要素の配列の配列 (グループ) であることを思い出してください。書き込みviz[0]は、選択範囲の最初の要素ではなく、要素の最初のグループを取得します。最初の要素を取得するには、次のように記述します。

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

これにより、d3 選択グループではなく、DOM ツリー内の特定の要素の親要素が得られます。

于 2015-08-16T22:00:59.867 に答える