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

Question

我正在阅读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节点
• 的var td语句然后使用该四元件阵列作为其数据,以某种方式

但.data(function(d) { return d; })实际上如何获得这些数据,以及它返回了什么？

Answer 1

当你写:

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

D3创建了一堆<foo>元素,一个用于数组中的每个条目.更重要的是,它还将数组中每个条目的数据与该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元素的数据以及在较低元素上重新绑定数据子集的能力:

 

Answer 2

理解这段代码的作用的关键是要认识到选择是DOM元素数组的数组.最外面的数组称为"选择",内部数组称为"组",这些组包含DOM元素.您可以通过进入d3js.org的控制台并进行d3.selectAll('p')之类的选择来测试它,您将看到一个包含包含'p'元素的数组的数组.

在您的示例中,当您第一次调用selectAll('tr')时,您将获得一个包含所有'tr'元素的单个组的选择.然后每个元素matrix与每个'tr'元素匹配.

但是当你在该选择上调用selectAll('td')时,选择已经包含一组'tr'元素.这一次,每个元素都将成为一组 'td'元素.组只是一个数组,但它也有一个引用旧选择的parentNode属性,在本例中是'tr'元素.

现在,当您调用data(function(d) { return d; })这个新选择的'td'元素时,d表示绑定到每个组的父节点的数据.所以在这个例子中,第一组中的'td'将与数组[11975,5871,8916,2868]绑定.第二组'td'与[1951,10048,2060,6171]绑定.

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