javascript - 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

如果圆圈设置为无显示，则一开始就没有任何东西可以捕捉到事件。尝试使用另一个元素作为圆圈的触发器。