防止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

容器元素

可以將圖形元素和其他容器元素作為子元素的元素。

• 一種，
• defs
• 字形
• 克 ，
• 標記，
• 面具，
• 缺少字形，
• 圖案，
• svg，
• 開關，
• 符號

g Element沒有畫布，它是容器。

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