javascript - 防止 d3 画笔触发点击事件

Question

即使画笔不为空，D3 画笔也会在“brushend”上触发奇怪的点击事件。我尝试了 d3.event.stopPropagation() 和 d3.event.preventDefault() 但它没有工作。有什么想法吗？

这是一个JSfiddle用于演示。

svg.append("rect")
  .attr("width", 200)
    .attr("height", 200)
  .style("stroke", "black")
  .style("fill", "none");


var brush_elem = d3.svg.brush()
  .x(d3.scale.linear().range([0, 200]))         
  .on("brushend", function(){ d3.event.sourceEvent.stopPropagation(); });

svg.append("g").call(brush_elem)
  .selectAll("rect")
    .attr("height", 200);

Answer 1

container element

可以将图形元素和其他容器元素作为子元素的元素。

• 一个，
• 定义，
• 字形，
• g,
• 标记，
• 面具，
• 缺少字形，
• 图案，
• svg，
• 切换，
• 符号

g 元素没有 Canvas ，它是容器。

<style>
  g {
    fill: white;
    pointer-events: "all";
  }

  circle {
    fill: gray;
  }

</style>
<svg width="960" height="500" style="border:1px solid red;">
<g>
  <circle cx="20" cy="20" r="100" stroke="red"/>
  <circle cx="220" cy="220" r="100" stroke="red" />
</g>
</svg>

<script src="https://d3js.org/d3.v5.js"></script>
<script>
d3.select("svg")
  .on("click", function() {
    alert('svg clicked')
  })

d3.select("g")
  .on("click", function() {
    alert('g clicked');
    event.stopPropagation()
  })
 </script>

https://jsfiddle.net/jsfiddleCem/98ut4jac/