☰

D3.js がデータをノードにバインドする方法を理解する 質問する

tag-icon • tag-icon javascript d3.js html-table
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; })実際にそのデータを取得するにはどうしたらよいのでしょうか。また、何を返すのでしょうか。

ベストアンサー1

次のように書くと:

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

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

これを試して：

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 要素にバインドされたデータと、下位の要素にデータのサブセットを再バインドする機能を示します。

  説明なし

おすすめ記事