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