d3.js：如何添加数据键？答案

【问题标题】：d3.js: How to add a data key?d3.js：如何添加数据键？
【发布时间】：2012-03-29 02:30:06
【问题描述】：

我正在学习 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 的内容？

【问题讨论】：

标签： javascript d3.js stream-graph

【解决方案1】：

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

【讨论】：

是的，但是如果我向数据添加一个“名称”键（即，如果我将其重组为对象数组而不是数组数组），那么区域函数将停止工作。怎么也可以调整面积功能？
假设您将数据数组放在data 下，这同样会变成.attr("d", function(d) { return area(d.data); }。
啊啊啊！这是我未能取得的突破。非常感谢。

【解决方案2】：

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

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

我还通过 mouseover 和 mouseout 事件将它们绑定在一起，这样鼠标悬停或移出任何元素都会导致集合中的所有元素同时改变颜色。

我希望这会有所帮助。

弗兰克

【讨论】：