javascript - d3.js:如何添加数据键？

Question

我正在学习 D3.js 并尝试着手解决 data keys与流图一起使用。我想改编 official streamgraph example :

...以便每个路径都有一个明确的数据键，并且鼠标悬停记录数据键。

官方例子添加路径如下:

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 文档说 area function is expecting a two-dimensional array .因此，如果我将 data0 从二维数组更改为对象数组，每个对象都有一个 name 键和一个 data 键，如何我还可以更改传递给 area 的内容吗？

Answer 1

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