React中使用D3生成树形图：链接样式异常且无法展开折叠

嘿，我看到你在React项目里用D3做树形图时遇到了两个典型问题——链接样式不对、节点没法展开折叠。刚好我之前也踩过这些坑，咱们一步步来解决～

一、修复链接样式问题 #

D3官方文档里的树形图链接通常是平滑曲线，但如果只用React渲染路径，直接用节点坐标连直线肯定不对。核心是要用D3的路径生成器来生成正确的曲线路径，而不是自己拼坐标。

具体步骤： #

1. 在componentDidMount里初始化链接生成器（根据你的树形方向选水平或垂直）：

componentDidMount() {
  const width = 800, height = 800;
  // 初始化树形布局
  const tree = d3.tree().size([height, width]); // 注意size的顺序是[高度, 宽度]，对应节点的x/y
  // 初始化水平链接生成器（如果是垂直树形就用linkVertical）
  this.linkGenerator = d3.linkHorizontal()
    .x(d => d.y) // 对应节点的y坐标（因为tree的size里width是横向）
    .y(d => d.x); // 对应节点的x坐标（纵向）
  
  // 后续的层级计算、状态保存...
}

2. 渲染链接时，用生成器生成路径的d属性：

render() {
  const { links } = this.state; // 假设你把计算后的links存在state里
  return (
    <svg width={800} height={800}>
      {/* 渲染链接 */}
      {links.map((link, idx) => (
        <path
          key={idx}
          d={this.linkGenerator(link)}
          fill="none"
          stroke="#ccc"
          strokeWidth="2"
          strokeLinecap="round"
        />
      ))}
      {/* 渲染节点... */}
    </svg>
  );
}

注意：D3的tree布局返回的节点，x对应size的第一个值（高度方向），y对应第二个值（宽度方向），所以链接生成器的x和y要对应好，不然路径会歪。

二、实现节点展开/折叠功能 #

要实现这个功能，需要结合D3的数据处理技巧和React的状态管理，核心是用_children保存原始子节点，点击时切换children的显示状态。

具体步骤： #

1. 初始化数据时，给有子节点的节点添加_children属性：

// 处理原始数据，保存子节点到_children
const prepareTreeData = (data) => {
  if (data.children) {
    // 把原始子节点存到_children，后续用来恢复
    data._children = [...data.children];
    // 可选：默认折叠节点，把children设为null
    // data.children = null;
  }
  // 递归处理所有子节点
  data._children?.forEach(child => prepareTreeData(child));
  return data;
};

// 在componentDidMount里调用
componentDidMount() {
  const rawData = /* 你的原始树形数据 */;
  const preparedData = prepareTreeData(rawData);
  const root = d3.hierarchy(preparedData);
  const tree = d3.tree().size([800, 800]);
  tree(root);
  this.setState({ treeData: root, links: root.links() });
}

2. 添加点击事件处理函数，切换节点的展开/折叠状态：

handleNodeClick = (node) => {
  // 切换children状态：有children就折叠（设为null），没有就从_children恢复
  if (node.children) {
    node.children = null;
  } else {
    node.children = node._children;
  }
  // 重新计算树形布局，更新状态
  const tree = d3.tree().size([800, 800]);
  const updatedRoot = d3.hierarchy(this.state.treeData.data); // 从原始数据重新生成层级
  tree(updatedRoot);
  this.setState({
    treeData: updatedRoot,
    links: updatedRoot.links()
  });
};

3. 渲染节点时绑定点击事件，并用图标提示展开/折叠状态：

render() {
  const { treeData } = this.state;
  return (
    <svg width={800} height={800}>
      {/* 渲染链接... */}
      {/* 渲染节点 */}
      {treeData.descendants().map((node, idx) => (
        <g
          key={idx}
          transform={`translate(${node.y}, ${node.x})`}
          onClick={() => this.handleNodeClick(node)}
          style={{ cursor: node._children ? 'pointer' : 'default' }}
        >
          <circle r={6} fill={node._children ? '#2ecc71' : '#95a5a6'} />
          {/* 显示展开/折叠图标 */}
          {node._children && (
            <text x={12} dy=".35em" fontSize="12">
              {node.children ? '−' : '+'}
            </text>
          )}
          <text
            x={node._children ? -12 : 12}
            dy=".35em"
            textAnchor={node._children ? 'end' : 'start'}
            fontSize="14"
          >
            {node.data.name}
          </text>
        </g>
      ))}
    </svg>
  );
}

关键注意点 #

• 每次节点状态变化后，必须重新调用D3的tree布局计算新的节点位置，不然React渲染的坐标不会更新。
• 确保links是从更新后的treeData生成的（root.links()），这样链接才会对应最新的节点位置。

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