Search code examples
javascriptd3.jschartstooltipline

D3.js line charting how to see x and y coordinates on mouseover?

How can I display the x and y coordinates of any point on a line in D3.js using a mouseover event, not just the points in the data array like [{x:1,y:2},{x:5,y:10}]? I want to see the coordinates for every point, not just the ones defined in the data array, when I hover over the line.

Solution

  • For D3 versions V5 and earlier, use 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>

    For version V6 and later use the native mouse event:

    d3.select('svg').on('mousemove', ({clientX, clientY}) => console.log({clientX, clientY}));
    svg {
  border: 1px solid black;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<svg width='300' height='150'></svg>