D3将工具提示添加到堆积面积图

时间:2019-10-25 16:18:25

标签: javascript d3.js svg

我想为下面的堆积面积图的鼠标悬停事件添加工具提示:

https://observablehq.com/@d3/stacked-area-chart?collection=@d3/d3-shape

工具提示应包含当前鼠标位置的图形类型(例如批发和零售贸易),x位置(例如2001年)和y位置(例如500)。

我尝试获取鼠标悬停事件的数据,但是它包含当前图形类型(例如批发和零售贸易)的y轴的所有数据范围。我尝试在网上搜索各种示例,但找不到匹配的示例。有没有人在堆积面积图上创建类似的工具提示?

我已经创建了以下示例图来演示该问题:

https://jsfiddle.net/3gqf8x5d/

鼠标悬停事件代码:

d3.selectAll("path")
  .on('mouseover', function(d) {
    console.log(d);
  })

0 个答案:

没有答案