获取悬停元素d3 v4 [重复]

Question

svg.append('circle')
    .attr('class', 'points')
    .attr("cx", d => x(d.date))
    .attr("cy", d => y(d.close))
    .attr("r", 10)
    .attr("fill", "#364652")
    .on('mouseover', (d, i) => {
          console.log(this)
     })

在上面的示例中 - this 返回窗口，因此该函数内部的 d3.select(this) 不起作用，就像在 v3 版本示例中那样。

如何获取鼠标悬停的元素？

Answer 1

我刚刚注意到我正在使用箭头函数，所以它在创建时绑定了上下文。

如果你想获取触发事件的元素，你应该使用正则函数表达式：

svg.append('circle')
    .attr('class', 'points')
    .attr("cx", d => x(d.date))
    .attr("cy", d => y(d.close))
    .attr("r", 10)
    .attr("fill", "#364652")
    .on('mouseover', function (d, i) {
          console.log(this)
     })