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

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

a
defs
字形，
g ，
标记，
面具，
缺失字形，
模式
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/

防止d3笔刷触发点击事件

1 个答案: