如何在D3中获取SVG上鼠标的X/Y坐标？遇d3.mouse()报错求助

嘿，我来帮你搞定这个问题！你遇到的d3.mouse() is not a function错误，核心原因是D3版本的差异：从D3 v6开始，d3.mouse()这个方法被移除了，取而代之的是d3.pointer()方法。

先说说你原来代码里的小问题：你用d3.select(this).attr("x")是拿不到鼠标位置的，因为SVG根元素本身并没有x属性，这个属性是给矩形、文本这类子元素用的~

下面是修改后的正确代码，直接就能获取SVG悬停时的鼠标相对位置：

// 假设你已经定义了width和height变量
let svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .on("mouseover", function(event){
    // 使用d3.pointer获取相对于当前SVG元素的坐标
    const [x, y] = d3.pointer(event);
    console.log(`鼠标在SVG内的位置：X=${x}, Y=${y}`);
  })

补充说明： #

• d3.pointer(event)会返回一个包含x、y的数组，这个坐标是相对于绑定事件的SVG元素的，会自动处理SVG的缩放、平移等变换，非常适合你的需求。
• 如果你需要的是相对于整个浏览器页面的坐标，也可以直接用原生事件属性：event.pageX和event.pageY。
• 如果你还在使用D3 v5及更早版本，那d3.mouse(this)是有效的，写法是：

  .on("mouseover", function(){
    const [x, y] = d3.mouse(this);
    console.log(x, y);
  })
  

内容的提问来源于stack exchange，提问作者throwawayryan