React中使用D3.select选择SVG返回空数组，无法获取内部元素求助

针对<object>标签加载SVG的情况 #

你遇到的核心问题是：<object>加载的SVG属于独立的文档上下文，直接用D3选择父元素无法穿透到内部SVG的DOM结构。必须等SVG加载完成后，访问其contentDocument才能操作内部元素。

修改代码如下：

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
import diagram from '../svg/diagram.svg';

export default function D3SelectTest() {
  const objectRef = useRef(null);

  useEffect(() => {
    const handleSvgLoad = () => {
      // 获取SVG内部的文档对象
      const svgDoc = objectRef.current?.contentDocument;
      if (!svgDoc) return;

      // 从独立文档中选择SVG根元素
      const svgNode = d3.select(svgDoc.documentElement);
      console.log("Select Test:", svgNode);
      
      // 遍历所有g元素并获取title文本
      svgNode.selectAll('g').each(function() {
        const elemID = d3.select(this).select('title').text();
        console.log("Element Searched:", elemID);
      });
    };

    // 绑定加载事件监听
    const objectElem = objectRef.current;
    if (objectElem) {
      objectElem.addEventListener('load', handleSvgLoad);
      // 组件卸载时清理监听
      return () => objectElem.removeEventListener('load', handleSvgLoad);
    }
  }, []);

  return (
    <div className="div1" id="div1">
      <object 
        type="image/svg+xml" 
        data={diagram} 
        id="diagram-object" 
        ref={objectRef} 
      />
    </div>
  );
}

针对内联SVG的情况 #

如果内联SVG仍无法选中元素，可能是选择时机或方式的问题，推荐使用React Ref直接获取DOM节点，避免ID选择器的潜在冲突：

import React, { Component, createRef } from 'react';
import * as d3 from 'd3';

class D3SelectTest2 extends Component {
  constructor(props) {
    super(props);
    this.svgRef = createRef();
  }

  componentDidMount() {
    // 通过Ref直接获取SVG DOM节点
    const svgNode = d3.select(this.svgRef.current);
    console.log("Select Test:", svgNode);
    
    svgNode.selectAll('g').each(function() {
      // 用D3自身的选择方法替代jQuery
      const elemID = d3.select(this).select('title').text();
      console.log("Element Searched:", elemID);
    });
  }

  render() {
    return (
      <svg 
        id="diagram"
        ref={this.svgRef}
        viewBox="0 0 200 200"
      >
        {/* 确保你的SVG包含带title的g元素 */}
        <g>
          <title>设备A</title>
          <rect x="20" y="20" width="50" height="50" fill="#2ecc71" />
        </g>
        <g>
          <title>设备B</title>
          <circle cx="120" cy="60" r="25" fill="#3498db" />
        </g>
      </svg>
    );
  }
}

export default D3SelectTest2;

额外注意事项 #

1. 检查SVG结构：确认<g>元素确实存在且未被嵌套在<defs>等不可见区域内
2. 避免混合D3与jQuery：D3的选择器API足以完成DOM操作，无需额外引入jQuery
3. 调试验证：用浏览器开发者工具的Elements面板，确认组件挂载后SVG及其子元素已正确渲染到DOM中

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