Question

我正在学习D3.js并试图了解流程图中使用的data keys。我想调整official streamgraph example：

enter image description here

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

官方示例添加路径如下：

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键，我怎样才能更改传递给{的{ {1}}？

Answer 1

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

Answer 2

如果数据键的含义是“数据图例”，那么您可能需要查看以下示例，其中我将图表的不同区域中的幅度，图例项目符号和图例文本的位置完全分开。

在每个示例中，您都可以清楚地看到数据是如何标记，结构化，传入和使用的。

我还通过mouseover和mouseout事件将它们绑在一起，以便鼠标悬停在任何元素之上或之外会导致集合中的所有元素同时改变颜色。

我希望这会有所帮助。

谢

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

2 个答案: