带有 D3 的 SVG 标记 mousedown 事件

Question

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

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

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

Answer 1

如果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>