D3.jsのノードへのデータバインディングを理解する

質問

D3.jsのドキュメントを読んでいて、理解するのが難しいことがあります。 は selection.data メソッド をドキュメントから引用しています。

これはドキュメントに記載されているサンプルコードです。

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var tr = d3.select("body").append("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr");

var td = tr.selectAll("td")
    .data(function(d) { return d; })
  .enter().append("td")
    .text(function(d) { return d; });

だいたいは理解できるのですが、どうなっているかというと、この .data(function(d) { return d; }) セクションの var td ステートメントを使用しますか？

私の最良の推測は以下の通りです。

• は var tr 文は、各 tr ノードに 4 要素の配列をバインドしています。
• は var td 文はその4要素の配列をデータとして使用し、なぜか

しかし、どのようにして .data(function(d) { return d; }) は実際にそのデータを取得し、何を返すのでしょうか？

どのように解決するのか？

書くとき。

….data(someArray).enter().append('foo');

D3は大量の <foo> 要素を作成します。さらに重要なのは、配列の各エントリーのデータをその DOM 要素に関連付けることで、その DOM 要素は __data__ プロパティとして関連付けます。

これを試してみてください。

var data = [ {msg:"Hello",cats:42}, {msg:"World",cats:17} ]; 
d3.select("body").selectAll("q").data(data).enter().append("q");
console.log( document.querySelector('q').__data__ );

コンソールに）表示されるのは、オブジェクトの {msg:"Hello",cats:42} に関連付けられたもので、最初に作成された q 要素に関連付けられたものだからです。

後で行う場合。

d3.selectAll('q').data(function(d){
  // stuff
});

の値は d ということがわかります。 __data__ プロパティであることがわかります。(この時点で、あなたが // stuff を新しい値の配列を返すコードで置き換えることを確認するのはこの時点ではまだ先です)。

別の例です の例では、HTML 要素にバインドされたデータと、下位の要素にデータのサブセットを再バインドする機能を示しています。