javascript D3.js线图如何在鼠标悬停时看到x和y坐标？

dy1byipe 于 2023-02-07 发布在 Java

关注(0)|答案(1)|浏览(172)

在D3.js中，如何使用鼠标悬停事件显示线上任意点的x和y坐标，而不仅仅是数据数组中的点，例如[{x：1，y：2}，{x：5，y：10}]？当我将鼠标悬停在线上时，我希望看到每个点的坐标，而不仅仅是数据数组中定义的点。

1条答案

对于D3版本V5和更早版本，使用d3.mouse：

d3.select('svg').on('mousemove', function(e) {console.log(d3.mouse(this));});

svg {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width='300' height='150'></svg>

对于V6及更高版本，请使用本机鼠标事件：
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个