How do i figure out the x and y position of my mouse in d3?

Question

I am using JS, D3, mouse events and HTML.

I'm trying to figure out the x and y position of my mouse when hovering over an SVG.

my code

let svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mouseover", function(){
        let x = d3.select(this).attr("x")
        console.log(x)
    })

I have looked online and found people speaking about using d3.mouse(this) however i keep getting d3.mouse() is not a function.

Can someone please help me :) thanks

Answer 1

In D3 v6, d3.mouse became d3.pointer :

let svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mouseover", e => console.log(d3.pointer(e)) )