如何在React中渲染D3的svg.node()返回的SVGSVGElement对象

React 不支持将原生 DOM 对象（比如代码中svg.node()返回的SVGSVGElement实例）直接作为 JSX 子元素渲染，因此抛出Objects are not valid as a React child错误。

方案1：通过ref挂载DOM节点（推荐，D3+React集成标准写法） #

用React的useRef获取容器DOM实例，在useEffect里完成D3的SVG生成、挂载逻辑，完全绕开React渲染原生节点的限制，还能正确绑定数据更新重绘逻辑。
修正后的完整代码示例：

import { useRef, useEffect } from 'react';
import * as d3 from 'd3';

interface BubbleChartProps {
  bubblesData: Array<{count: number, [key: string]: any}>;
  width: number;
  height: number;
}

const BubbleChart = ({ bubblesData, height, width }: BubbleChartProps) => {
  // 创建ref指向图表容器
  const chartContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!chartContainerRef.current) return;
    // 清空容器，避免重复渲染时内容叠加
    chartContainerRef.current.innerHTML = '';

    const packData = (size: [number, number]) => {
      return d3.pack().size(size).padding(3);
    }

    const makeHierarchy = () => {
      return d3.hierarchy({ children: bubblesData }).sum((d: any) => d.count);
    }

    const hierachalData = makeHierarchy();
    const packLayout = packData([width - 2, height - 2]);
    const root = packLayout(hierachalData);

    const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height);

    const leaf = svg.selectAll("g")
      .data(root.leaves())
      .enter().append("g")
      .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);

    // 注：原代码半径计算逻辑存在bug，会导致所有圆大小一致，这里修正为直接使用布局计算好的半径值
    leaf.append("circle")
      .attr("r", d => d.r)
      .attr("fill", "#d9edf7")

    // 将D3生成的svg节点直接挂载到容器下
    chartContainerRef.current.append(svg.node()!);

  // 入参变化时自动重绘
  }, [bubblesData, width, height])

  return (
    <div id="chart" ref={chartContainerRef}></div>
  )
}

export default BubbleChart

该方案完全保留D3的原生操作能力，不会和React虚拟DOM产生冲突，支持绑定各类交互事件，是生产环境的首选方案。

方案2：转成HTML字符串通过dangerouslySetInnerHTML渲染 #

如果气泡图是纯静态展示、不需要绑定交互事件，可以把D3生成的SVG节点序列化为字符串，用React提供的dangerouslySetInnerHTML属性插入，适合简单轻量的展示场景。
核心代码片段：

const makeBubbles = () => {
  // 省略原有svg生成逻辑
  const svgNode = svg.node();
  // 将DOM节点序列化为HTML字符串
  return new XMLSerializer().serializeToString(svgNode);
}

return (
  <div 
    id="chart" 
    dangerouslySetInnerHTML={{__html: makeBubbles()}}
  ></div>
)

注意：该方案不适合需要绑定鼠标事件、做动态更新的场景，且插入内容如果包含用户可控数据会存在XSS风险，优先选择方案1。

原代码中圆形半径的计算逻辑存在明显问题：

• 每个圆形绘制时都重复计算全量数据的最大/最小值，存在不必要的性能损耗
• 最终返回scale(minValue)会导致所有圆形半径完全一致，circle pack布局计算出的d.r本身就是已经根据数值大小映射好的半径值，直接赋值即可，不需要额外做缩放处理。

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