2

enter() 選択の余分な select() は正確に何をしますか? selectAll() がないのはなぜですか?

ここで、おそらく「品質基準を満たす」ためにさらにテキストを投稿することになっていますが、質問が十分に正確であり、できればあまり愚かではないと確信しています。さまざまな d3 のチュートリアルやドキュメントを数日間読んでいましたが、この部分はまだ私から逃れています。

4

2 に答える 2

8

enter selectionでselectを呼び出すことはめったにありません。代わりに追加または挿入を使用する方がはるかに一般的です。ただし、これら 3 つのメソッドの最終結果は同じです。つまり、enter selection で要素をインスタンス化する方法を指定します。

data-joinを実行すると、次の 3 つの新しい選択が返されます。

  • 更新選択: データに対応する選択された要素
  • 終了選択: 残りの要素 (対応するデータなし)
  • 入力選択: 残りのデータ (対応する要素なし)

入力選択は残りのデータであるため、定義上、対応する要素はありません。このように、Enter セレクションには最初に、適切な要素にインスタンス化する必要があるプレースホルダー ノードが含まれています。これらのノードが表示されることはほとんどありません。通常、append または insert を呼び出して、不足している要素を作成する方法を D3 にすぐに指示するためです。これらのメソッドは新しい要素を作成し、DOM に挿入します。(親ノードは、ネストされた選択のチュートリアルで説明されているように、前のselectによって決定されます。)

まれに、入力ノードをインスタンス化するために、標準の追加または挿入以外のことをしたい場合があります。たとえば、標準の append メソッドでは、常に同じ名前の要素 (「div」や「rect」など) が作成されます。名前を動的に指定したい場合は、代わりに select を使用し、関数を渡して新しい要素を作成できます ( d3-js メーリング リストのこのスレッドで説明されているように)。

enterSelection.select(function(d) {
  return this.appendChild(document.createElement(d.name));
});

実際、append がどのように実装されているかを見ると、select の単なるラッパーであることがわかります。少し単純化された実装は次のとおりです。

d3.selection.prototype.append = function(name) {
  return this.select(function() {
    return this.appendChild(document.createElement(name));
  });
};

これらの実装例は、名前空間付きの SVG 要素を扱わないため、単純化されています。このため、組み込みメソッドを使用する方が簡単です。これらの例は、D3 が内部でどのように機能するかを説明するためだけのものです。

于 2012-09-08T22:48:45.587 に答える
2

セレクションを呼び出す.select()と、.enter()他のセレクションと同じことが行われます。これを使用して、選択したものをさらに絞り込むことができます。選択は実際にはまだ存在しないものを参照するため、実際に.selectAll()は意味がありません。.enter()したがって、選択範囲全体を再度選択することしかできません (区別する特徴がないため)。

于 2012-09-06T18:28:21.803 に答える