D3 ...得到一个圆形出现在鼠标悬停并消失鼠标

Question

我有一个折线图。当用户将鼠标移动到该行的某个点上时，我想显示一个圆圈（请参阅this）

我不是使用nvd3，而是使用d3。我有：

svg.selectAll(".dot") 
     .data(data) 
     .enter().append("circle") 
     .attr("r", 1) 
     .attr("cx", function(d) { return x(d.number); }) 
     .attr("cy", function(d) { return y(d.people); }) 
     .style("fill", "white").style("stroke","black") 
     .style("display", "none") 
     .on('mouseover', function() { 
     d3.select(this).style("display","inline"); 
    }) 
     .on('mouseout', function() { 
     d3.select(this).style("display", "none"); 
     }); 

我最初设定的圆的显示为“无”，然后可见，当用户用鼠标悬停在。然后我们再将它们隐藏起来，当他们鼠标移出但是，当鼠标悬停时，圆圈不会出现。我究竟做错了什么？

Answer 1

如果该圆圈设置为不显示任何内容，那么首先就没有什么可以抓住事件的。尝试使用另一个元素作为圈子的触发器。