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)
     })

获取悬停的元素d3 v4

1 个答案: