在D3图表中，“点击时”无法按预期方式作用于圆圈

Question

在“我的D3”图表中，OnClick无法正常工作。

有什么建议吗？ 似乎是由于焦点线和焦点圈造成了问题。 预期的行为应该在点击圆圈上，它应该会弹出警报。

PS：如果我在没有聚焦线和圆的情况下尝试单击圆，则.on("click"可以工作。

我的代码沙箱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) {
    if (d.startupRunningStatus === "OUT_OF_SYNC") {
      return 5;
    }
  })
  .on("click", function(d) {
    alert("on click" + d.magnitude);
  })
  .attr("class", "circle");

Answer 1

这是一个堆栈问题。如屏幕截图所示，rect覆盖了圆圈。因此，您需要按顺序附加元素。

最快捷的解决方法是在附加circle之后附加rect。

https://codesandbox.io/s/nifty-brattain-vi5g4