Question

我在这里有一个矮人-https://plnkr.co/edit/iOGJUosvruW9KV1FF9lp?p=preview

将鼠标悬停在条上时，我想显示一个工具提示

此刻它是随鼠标移动的，但我希望它位于我所经过的小节上方的固定位置。

如何获取我结束的栏的x和y位置

我已经尝试过，但是出现错误。

console.log(d3.mouse(this)[0]);

Answer 1

为explained in MDN：

箭头函数表达式的语法比函数短表达式和没有它自己的，参数，super或新目标。这些函数表达式最适合非方法函数，它们不能用作构造函数。

箭头函数被引入为pure functions，这就是为什么它们没有这种上下文变量的原因。

只需将箭头功能转换为常规功能即可。我为你的朋克分叉了：

https://plnkr.co/edit/3Y4T0JZ42eH2wb42tpsg?p=preview

d3.selectAll('.bar').on("mouseover", function(){
   console.log(d3.mouse(this)[0]);
   d3.select('.chart-tooltip').style("display", null)
})

更新：

您还可以将其替换为全局d3.event.target并将该功能保留为箭头功能。

d3.selectAll('.bar').on("mouseover", () => {
  console.log(d3.mouse(d3.event.target)[0]);
  d3.select('.chart-tooltip').style("display", null)
})

更新II：

回调的

Gerardo Furtado proposed to use the third argument以获取html元素。这也是一个很好的解决方案，因为d3.event在某些情况下可能会出现问题。

d3.selectAll('.bar').on("mouseover", (datum,index,elements) => {
  console.log(d3.mouse(elements[index])[0]);
  d3.select('.chart-tooltip').style("display", null)
})

D3-将鼠标悬停在x位置

1 个答案: