如何在React中为D3元素添加点击及鼠标事件处理器

我尝试用以下代码在SVG中添加rect元素并绑定mouseenter等鼠标事件，但事件无法触发：

import { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const svg = d3.select("#svg");

    svg
      .append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 300)
      .attr("height", 300)
      .attr("fill", "red")
      .attr("id", "red-rect");

    const redRect = d3.select("#red-rect");

    redRect.on("mouseenter", () => {
      console.log("working");
    });
  }, []);

  return <svg id="svg" />;
}

奇怪的是，直接给整个SVG绑定事件是可以正常运行的：

svg.on("mouseenter", () => {
  console.log("working");
});

另外，如果通过React的return语句直接渲染rect元素，再用D3绑定事件就能正常生效，但我希望完全通过D3来创建元素，不使用React渲染这些SVG元素：

export default function App() {
  useEffect(() => {
    const greenRect = d3.select("#green-rect");

    greenRect.on("mouseenter", () => {
      console.log("working");
    });

  }, []);

  return (
    <svg id="svg">
      <rect x={0} y={0} width={300} height={300} fill="green" id="green-rect" />
    </svg>
  );
}

请问如何通过D3在SVG上添加rect（或其他元素）并成功绑定鼠标事件？

问题原因 #

React的虚拟DOM协调机制会和D3直接操作真实DOM的行为产生冲突：当你在useEffect里用D3创建元素后，React可能在后续渲染周期中"清理"这些未被它追踪的元素，导致事件绑定失效。另外，未设置明确尺寸的SVG也可能导致内部元素无法接收鼠标事件。

解决方法 #

方法1：让D3完全独立控制DOM容器

创建一个空的div容器，让D3在其中创建SVG及所有子元素，彻底避免React的DOM干预：

import { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    // 选择容器并创建SVG
    const container = d3.select("#d3-container");
    const svg = container.append("svg")
      .attr("width", 300)
      .attr("height", 300);

    // 创建rect时直接链式绑定事件
    svg.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 300)
      .attr("height", 300)
      .attr("fill", "red")
      .on("mouseenter", () => console.log("mouseenter触发！"))
      .on("click", () => console.log("click触发！"));

    // 组件卸载时清理D3创建的元素
    return () => container.selectAll("*").remove();
  }, []);

  return <div id="d3-container" />;
}

方法2：在React渲染的SVG中安全使用D3

如果必须用React渲染SVG，需确保SVG有明确尺寸，且创建元素时直接链式绑定事件（避免二次选择可能带来的问题）：

import { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const svg = d3.select("#svg");

    // 创建rect时直接绑定事件，无需二次选择
    svg.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 300)
      .attr("height", 300)
      .attr("fill", "red")
      .on("mouseenter", () => console.log("working"))
      .on("click", () => console.log("clicked"));

    // 组件卸载时清理D3创建的rect
    return () => svg.selectAll("rect").remove();
  }, []);

  // 给SVG设置明确宽高，确保内部元素能接收事件
  return <svg id="svg" width={300} height={300} />;
}

关键注意事项 #

• 避免React和D3同时操作同一DOM分支，尽量让其中一方完全控制某块DOM区域
• 创建D3元素时直接链式绑定事件，减少二次选择元素的操作
• 必须给SVG设置明确的width和height属性，否则内部元素可能无法响应鼠标事件

内容的提问来源于stack exchange，提问作者SixtyEight