D3 ...在鼠标悬停时出现一个圆圈并在onmouseout上消失

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

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