带有 D3 的 SVG 标记 mousedown 事件

如何解决带有 D3 的 SVG 标记 mousedown 事件

我有一个 <svg></svg> 节点，我尝试添加 mousedown 事件，该事件由于某种原因根本没有被触发，而 click 工作正常，这种行为是有意的吗？ svg 标签不能附加 mousedown 事件还是我做错了什么？

我正在使用 d3.js 库附加事件：

 d3.select(svg)
    .on("mousedown",(event) => setRectPoint(event,gContainer))
    .on("mousemove",(event) => drawRectOutline(event,gContainer));

解决方法

如果 svg 已经是一个选择，您不需要再次执行 d3.select。

在下面，您可以看到按下鼠标按钮时触发 mousedown，释放按钮时触发 click。

const svg = d3.select("#viz")
  .append("svg")
  .attr("width",240)
  .attr("height",180);

const drawRect = (e) => {
  d3.select(e.target)
    .append("rect")
    .attr("x",e.x)
    .attr("y",e.y)
    .attr("width",40)
    .attr("height",20);
}

const drawCircle = (e) => {
  d3.select(e.target)
    .append("circle")
    .attr("cx",e.x)
    .attr("cy",e.y)
    .attr("r",20);
}

svg
  .on("mousedown",e => drawRect(e))
  .on("click",e => drawCircle(e));

svg {
  border: 1px solid black;
}

rect {
  fill: #f00;
}

circle {
  fill: #0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<div id="viz"></div>