在D3圖表中，“點擊時”無法按預期方式在圓上運行

Question

在我的D3圖表中，OnClick無法正常工作。

有什么建議么 ？ 似乎是由於焦點線和焦點圈造成了問題。 預期的行為應該在點擊圓圈上，它應該會彈出警報。

PS： .on("click"工作，如果我在沒有聚焦線和圓的情況下嘗試單擊圓。

我的代碼沙箱在這里

代碼-

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覆蓋了圓圈。 因此，您需要按順序附加元素。

快捷鍵和最簡單的解決方法是在添加rect之后添加circle 。

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