D3 svg点击事件和圆圈点击事件重叠

Question

我要解决的问题如下：

我创建了一个 500x500 像素的 svg。在此 svg 中，我附加了一个半径为 50px 的圆。我在圆圈上添加了一个点击事件，使其颜色变为红色。我在 svg 的其余部分添加了一个点击事件，以便圆圈的颜色变为绿色。

这可能吗？

我已经尝试将点击事件放在 svg 上，它覆盖了整个 500x500px 以防止附加到圆圈的点击事件起作用。

有人提示我使用 stopPropagation，但没有成功。

var svg = d3.select("#cv")
  .attr("height", 300)
  .attr("width", 300)
  .style("border", "1px solid red")
  .on("click", function(d) {
    circ.style("fill", "green")
  });

var circ = svg
  .append("circle")
  .attr("r", 100)
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("stroke", "black")
  .style("fill", "grey")
  .on("click", function(d) {
    circ.style("fill", "red")
  });

#cv {
  width: 300px;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="cv">
<defs>
 <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
      <image x="0" y="0" href="https://i.stack.imgur.com/skwGx.jpg" width="200" height="200"></image>
    </pattern>
</defs>
</svg>

Answer 1

您可以为此使用一个技巧：附加一个与 SVG 尺寸相同的白色 rectangle，然后向其添加点击监听器。确保先添加它，因为 SVG 没有 z-index，而是通过在所有先前的项目上绘制每个项目来工作。所以你定义的第一项本质上是背景。

var svg = d3.select("#cv")
  .attr("height", 300)
  .attr("width", 300)
  .style("border", "1px solid red");

var bg = svg.append("rect")
  .attr("width", 300)
  .attr("height", 300)
  .attr("fill", "white")
  .on("click", function(d) {
    circ.style("fill", "green")
  });

var circ = svg
  .append("circle")
  .attr("r", 100)
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("stroke", "black")
  .style("fill", "grey")
  .on("click", function(d) {
    circ.style("fill", "red")
  });

#cv {
  width: 300px;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="cv">
<defs>
 <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
      <image x="0" y="0" href="https://i.stack.imgur.com/skwGx.jpg" width="200" height="200"></image>
    </pattern>
</defs>
</svg>

D3 svg点击事件和圆圈点击事件重叠

D3 svg click event and circle click event overlapping

svg

d3.js