D3图表中的行“ Circle”不存在

Question

我在d3图表中绘制的值为4个值，对于第一个值，我没有画圆，但对于其余值，它完美地显示了圆。

有人可以指出一个问题吗？谢谢。

代码沙箱here

代码段-

  g.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return xScale(d.startTime);
      })
      .attr("cy", function(d) {
        return yScale(d.magnitude);
      })
      .attr("r", function(d) {
        return 5;
      })
      .on("click", function(d) {
        alert("on click" + d.magnitude);
      })
      .attr("class", "circle");

Answer 1

您的图例中已经有一个圆圈。因此，当您这样做时...

g.selectAll("circle")

...您正在选择该圆并向其添加数据点。

解决方案什么也不做：

g.selectAll(null)

或者，如果您打算选择更新，请按类别选择：

g.selectAll(".foo")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "foo)
  //etc...

结果是：https://codesandbox.io/s/pedantic-joliot-golgz?fontsize=14