d3 堆叠区域工具提示

Question

我有这个堆积面积图，我正在尝试获得正确的值，但不知道如何。 我试图在图表上放置一个透明矩形，但后来意识到我仍然不知道如何获取值。

.on("mousemove", function(d) {
      tooltip
        .style("display", "inline-block")
        .html(d[0][1]);
    })

这只会给我一个固定值。

这是我的plunker

也许你们有一个想法。

Answer 1

如果您检查数据对象 (d)，尽管它类似于数组，但您可以看到它也具有键和索引属性，这应该会引导您找到正确的数据。

.on("mousemove", function(d) {
  tooltip
    .style("display", "inline-block")
    .html(d[d.index].data[d.key]);
})

密钥由您在 plunker 中定义的密钥访问器 stack.keys(...) 确定。

另请参阅堆栈生成器的文档：https://github.com/d3/d3-shape/blob/master/README.md#stacks