selection.selectを使用して不要なデータ継承を防止する

Question

d3では、selection.selectには元の選択の親ノードからのデータを引き継ぐという副作用があります。これは、データがすべてのレベルでデータ結合を必要とせずに親にバインドされた更新データが子にプッシュされるように、親ノードと子ノード間でデータが共有される状況で望ましい。

しかし、親にバインドされたデータと子にバインドされたデータの間に明示的な関係がない場合はどうですか？この状況では、selection.selectは、単純にノードを選択することによって、ノードのデータに無関係な親データが詰まってしまうため、潜在的な可能性があります。

これを避けるにはどのような方法が最適ですか？私はオプションのカップルを考えることができますが、どちらも素晴らしい思えません：

は

1. 常に暗黙的なデータの継承が望まれている場合を除いてどこでもselection.selectAllを使用しています。しかし、selection.selectの使用がd3.selectと矛盾し、個々のノード（単にselection.selectで何をしたいか）を選択するために使用されるため、これは理想的ではありません。

2. selection.selectの代わりにdescendents selectorを使用して、特定のノードを分離してください。d3.selectを使用してください。 selection.selectを使用すると便利なことは、選択を暗黙のうちに開始選択の子孫に限定することです。セレクタでこれを達成することは、それほど素晴らしいことではありません。

個人的に、私はAPIの中で最も一般的に使用される機能のいくつかの一つの特定の形でDOM状態修飾副作用を持つ巨大なファンではありません。私はselection.update(selector)のような明示的な呼び出しがselection.appendとselection.insertと対称的であるかどうかを理解することが容易になると思う。

しかし、現在のAPIでは、selection.selectを使用すると、継承を効果的に破るために使用できる他のメカニズムがあるのでしょうか？

Answer 1

私はD3 Github：https://github.com/mbostock/d3/issues/1443で問題を提出しました。解決策はありませんが、問題の興味深い議論があります。一番下にあるMikeは問題なく動作する回避策を提供しています。便宜的にここに貼り付けています：

データの継承を防ぐことができる方法の1つは、中間ノード縛られたデータなし。

var intermediary = selection.append("div") 
    .datum(function() { return null; }); 

次に、仲介者からの選択は、親選択からのデータを伝播しません。もちろん、DOMの中間ノードはやや不幸です。あなたが使用することができます

Answer 2

：

d3.select(selection.node().querySelector(selector)) 

はselectWithoutDataPropagation（）メソッドで選択プロトタイプを拡張し、このjsfiddleでアクションでそれを参照してください。