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

Question

D3.jsのドキュメントを読んでおり、ドキュメントからthe selection.data methodを理解することが難しいと感じています。

これは、ドキュメントに与えられたサンプルコードです：

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; }); 

は私がこれのほとんどを理解しますが、何がvar td文の.data(function(d) { return d; })部分で起こっていますか？

次のように私の最高の推測では、次のとおりです。

• var tr文がvar td文は、その後
何とか、そのデータとして、4つの要素の配列を使用する各TRノード
• に4要素の配列を結合しました

しかし、.data(function(d) { return d; })は実際にそのデータをどのように受け取っていますか？

Answer 1

あなたが書いた：

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

D3は<foo>要素、配列内の各エントリに1つの束を作成します。さらに重要なことは、アレイ内の各エントリのデータをそのDOM要素に関連付けて、__data__というプロパティとして関連付けていることです。それが最初に作成q要素と関連していたので、

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}です：

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

後で行う場合：dの値はその__data__財産であることが判明し

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

。 （この時点で、それはあなたが新しい値の配列を返すコードで// stuffを置き換えることを確認するためにあなた次第です。）HTML要素にバインドされたデータと再バインドするデータのサブセットを下に能力を示す

Here's another example要素：

 

Answer 2

このコードが何をしているかを理解する鍵は、選択がDOM要素の配列の配列であることを認識することです。最も外側の配列は「選択」と呼ばれ、内側の配列は「グループ」と呼ばれ、それらのグループにはDOM要素が含まれます。これをテストするには、d3js.orgのコンソールでd3.selectAll（ 'p'）のように選択すると、 'p'要素を含む配列を含む配列が表示されます。

あなたの例では、最初にselectAll（ 'tr'）を呼び出すと、すべての 'tr'要素を含む単一グループの選択肢が得られます。 matrixの各要素は、各 'tr'要素に一致します。

しかし、その選択に対してselectAll（ 'td'）を呼び出すと、選択には既に 'tr'要素のグループが含まれています。今回は、これらの要素のそれぞれがというグループになり、 'td'要素のグループになります。グループは単なる配列ですが、古い選択を参照するparentNodeプロパティもあります。この場合、 'tr'要素です。

この新しい「td」要素の選択でdata(function(d) { return d; })を呼び出すと、dは各グループの親ノードにバインドされたデータを表します。したがって、この例では、最初のグループのtdは配列[11975,58771,8916,2868]にバインドされます。第2グループのtdは[1951、10048、2060、6171]と結びついています。

あなたはここに結合選択とデータのマイク・ボストック独自の優れた解説を読むことができます：http://bost.ocks.org/mike/selection/

Answer 3

が使用されているデータのインデックスを表示するために、私カウンターを使用してください。

var tr = d3.select("body").append("table").selectAll("tr") 
.data(matrix) 
.enter().append("tr") //create a row for each data entry, first index 
.text(function(d, i) { return i}); // show the index i.e. d[0][] then d[1][] etc. 

var td = tr.selectAll("td") 
.data(function(d) { return d; }) 
.enter().append("td") 
.style("background-color", "yellow") //show each cell 
.text(function(d,i) { return i + " " + d; }); // i.e d[from the tr][0] then d[from the tr][1]...