react-d3-tree自定义节点使用案例

react-d3-tree 主要 API 及其中文解释：

1. Tree 组件的 props：这些 API 提供了丰富的配置选项，可以用来定制树的外观和行为。例如，可以使用 nodeSize 属性调整节点的大小，使用 pathFunc 属性绘制自定义的连线，使用 onClick 属性处理节点的点击事件等等。

• data：树的数据对象。
• zoomable：指定是否允许缩放树。
• translate：指定树的偏移量，格式为{ x: number, y: number }。
• orientation：指定树的方向，可以是"horizontal"或"vertical"。
• separation：指定相邻节点之间的距离，可以是一个数值或一个函数。
• nodeSize：指定每个节点的大小，可以是一个数值或一个函数。
• pathFunc：指定绘制节点之间连线的函数。
• depthFactor：指定节点深度的因素，用于计算节点之间的距离。
• collapsible：指定是否允许折叠节点。
• onClick：指定节点的点击事件处理函数。
• onCollapse：指定节点折叠事件处理函数。
• onExpand：指定节点展开事件处理函数。
• renderCustomNodeElement：指定自定义节点元素的渲染函数。
• Node 组件的 props：
• nodeData：节点的数据对象。
• classNames：节点的 CSS 类名。
• textLayout：指定节点标签的布局，可以是"horizontal"或"vertical"。
• circleRadius：指定节点圆圈的半径。
• nodeSvgShape：指定节点形状的 SVG 路径。
• foreignObjectProps：指定包含节点标签的 foreignObject 元素的 props。
• nodeLabelComponent：指定节点标签的渲染函数。
• onClick：指定节点的点击事件处理函数。
• onRightClick：指定节点的右键点击事件处理函数。
• onCollapse：指定节点折叠事件处理函数。
• onExpand：指定节点展开事件处理函数。
• Link 组件的 props：
• linkData：连接两个节点的数据对象。
• orientation：指定树的方向，可以是"horizontal"或"vertical"。
• pathFunc：指定绘制连线的函数。
• transitionDuration：指定连线动画的持续时间。

2. react-d3-tree 的 renderCustomNodeElement 方法可以帮助您自定义渲染节点元素。这个方法包含了以下五个参数：

• datum：当前节点的数据对象，由 react-d3-tree 的 Tree 组件传递给 Node 组件。
• toggleNode：用于展开或收起节点的方法，只有在 shouldCollapseNeighborNodes 属性为 true 时才有效。
• collapsed：表示当前节点是否已经折叠。
• nodeProps：所有应该传递给节点的自定义属性都包含在这个对象中。
• mouseEvent：包含当前鼠标事件的对象，可以用于处理鼠标事件。

3. 案例

const foreignObjectProps = {
  width: nodeSize.x,
  height: nodeSize.y,
  x: -115,
  y: -40,
};
const handleNodeClick = (nodeData) => {
  console.log('点击node：', nodeData);
};
const renderForeignObjectNode = ({
  nodeDatum,
  toggleNode,
  foreignObjectProps,
  handleNodeClick,
}) => {
  return (
    <g>
      <foreignObject {...foreignObjectProps}>
        <div>...</div>
      </foreignObject>
    </g>
  );
};
<Tree
  key={depthNum}
  data={treeData}
  // translate={{ x: (window.innerWidth - 556) / 3, y: (window.innerHeight - 68) / 2 }}
  nodeSize={nodeSize} //节点尺寸
  initialDepth={depthNum} //层级
  depthFactor={300} //间距
  zoom={zoomScale}
  zoomable={true}
  scaleExtent={{ min: 0.6, max: 1.5 }}
  pathFunc="step"
  renderCustomNodeElement={(rd3tProps) =>
    renderForeignObjectNode({
      ...rd3tProps,
      foreignObjectProps,
      handleNodeClick,
    })
  }
  separation={{ siblings: 1.2, nonSiblings: 1.2 }}
  collapsible
  orientation={'horizontal'}
/>;