防止D3笔刷触发点击事件

Question

D3 brush fires a strange click event on " brushend " even when the brush is not empty. I tried d3.event.stopPropagation() and d3.event.preventDefault() but it doesn't work. Any ideas?

Here is a JSfiddle for demonstration .

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

An element which can have graphics elements and other container elements as child elements.

• a,
• defs,
• glyph,
• g ,
• marker,
• mask,
• missing-glyph,
• pattern,
• svg,
• switch,
• symbol

g Element doesn't have canvas, it is container.

<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/