d3.js:如何添加数据密钥？

Question

我正在学习D3.js并试图了解与流程图一起使用的数据键.我想改编一下官方的流图示例:

...以便每个路径都有一个显式数据键,以便鼠标悬停记录数据键.

官方示例添加路径如下:

var area = d3.svg.area()
   .x(function(d) { console.log('x', d.data); return d.x * w / mx; })
   .y0(function(d) { return h - d.y0 * h / my; })
   .y1(function(d) { return h - (d.y + d.y0) * h / my; });
vis.selectAll("path")
 .data(data0) 
 .enter().append("path")
 .style("fill", function() { return color(Math.random()); })
 .attr("d", area);

我尝试调整代码如下,但我不知道如何更改data0(当前是数组的数组)的结构来实现我想要的:

vis.selectAll("path")
 .data(data0, function(d) { return d.name }) // Add key function
 .enter().append("path")
 .style("fill", function() { return color(Math.random()); })
 .attr("d", area)
 .on("mouseover", function (d,i) { 
     console.log("mouseover", d.name); // Log name property on mouseover
  });

按照目前的情况,如果没有对结构进行任何改动data0,毫不奇怪的是它不起作用.如何添加name属性而data0不会搞乱area和.data()功能？

更新:更清楚一点:D3文档说区域函数期望二维数组.因此,如果我data0从二维数组更改为一个对象数组,每个对象都有一个name键和一个data键,我怎样才能更改传递给我的内容area？

Answer 1

示例中的数据没有"name"属性,因此您需要将其添加到数据中才能使用它.合并/更新数据时使用您引用的数据键,即您已经绘制了一些路径然后更新(其中一些).该.data()函数将尝试确定哪些数据已更新以及哪些数据是新数据.如果这对您不起作用,您可以使用数据键来帮助它,即在您的情况下告诉它具有相同名称的东西是相同的数据.