d3.js - チュートリアル以降、d3 のネストされた選択は変更されましたか?

Question

このトピックに関する別のスレッドは、私ができる唯一の返信は答えでなければならないと言っています。SO、ここにこのトピックに関する別のスレッドがあり、明確な質問をします。

このチュートリアル:

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

d3.select("tbody td") の親ノードは html です。私が得たのは、親ノードがtrであることです。または、d3.select("tbody td")[0][0].parentNode は tr です。

この件に関する別のスレッドで：

select() と selectAll() の違いを理解するのを手伝ってください

ボストック氏によると、select("#something").selectAll("td") の親ノードは ID #something を持つノードです。私が得たのは、親ノードがtrであることです。

私は何が欠けていますか？

Answer 1

混乱は、用語が多すぎるためです。D3 セレクションは、第 1 レベルに「親ノード」が含まれ、第 2 レベルに「子ノード」が含まれる 2 次元配列です。親の代わりに使用されることがある別の用語は、「グループ」です。

あなたが見ているd3.select("tbody td")[0][0].parentNodeのは、DOM ツリーの物理的な親ノードです。

select/selectAll選択は、呼び出しの連鎖方法に応じて、独自のグループ化 (または親/子) 構造を維持します。子は実際には、実際の DOM 内の親ノードの子孫の任意の組み合わせにすることができます。