3

我正在学习 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，毫无疑问它是行不通的。如何在不弄乱and函数的情况下添加name属性？data0area.data()

更新：更清楚一点：D3 文档说area 函数需要一个二维数组。因此，如果我data0从一个二维数组更改为一个对象数组，每个对象都有一个name键和一个data键，我怎样才能更改我传递给的内容area？

4

2 回答 2

6

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

于 2012-03-12T18:08:35.117 回答
0

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

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

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

我希望这有帮助。

坦率

于 2012-04-19T03:57:02.003 回答