问了解D3.js如何将数据绑定到节点

EN

当你写的时候：

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

D3创建了一组<foo>元素，数组中的每个条目对应一个元素。更重要的是，它还将数组中每个条目的数据作为__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。)

Here's another example显示绑定到HTML元素的数据以及在较低元素上重新绑定数据子集的能力：

​

理解这段代码的关键是认识到选择是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,5871,8916,2868绑定。第二组‘td’将与1951年，10048,2060,6171绑定。

您可以在这里阅读mike bostock自己对选择和数据绑定的出色解释：http://bost.ocks.org/mike/selection/

使用计数器i显示正在使用的数据的索引。

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]...