如何在react-d3-tree的renderCustomNodeElement属性中添加JSON数据内的图片

实现步骤 #

• 第一步：调整源JSON结构，给需要渲染图片的节点添加图片地址字段，示例结构如下：

const orgChartJson = {
  name: "总负责人",
  attributes: {
    department: "管理部"
  },
  avatar: "https://示例地址/avatar1.png", // 新增的图片配置字段，可自定义字段名
  children: [
    {
      name: "部门主管",
      attributes: {
        department: "技术部"
      },
      avatar: "https://示例地址/avatar2.png"
    }
  ]
}

• 第二步：修改自定义节点渲染函数，使用SVG原生<image>标签渲染图片，你可以自行调整位置、尺寸参数适配你的布局：

const renderRectSvgNode = ({ nodeDatum, toggleNode }) => (
  <g>
    {/* 头像渲染逻辑 */}
    {nodeDatum.avatar ? (
      <image
        x="-10" 
        y="0" 
        width="20" 
        height="20" 
        href={nodeDatum.avatar}
        onClick={toggleNode}
      />
    ) : (
      // 没有头像时显示默认蓝色圆形
      <circle cx="0" cy="10" r="10" fill="blue" onClick={toggleNode} />
    )}
    <text fill="blue" strokeWidth="1" x="20">
      {nodeDatum.name}
    </text>
    {nodeDatum.attributes?.department && (
      <text fill="green" x="20" dy="20" strokeWidth="1">
        Department: {nodeDatum.attributes?.department}
      </text> 
    )}
  </g>
);

注意事项 #

• 如果使用本地静态图片，不要直接把相对路径字符串赋值给avatar字段，需要先通过import或者require引入后再赋值，否则React不会正确解析静态资源路径。
• 如果需要实现圆形头像效果，可以给元素添加clipPath进行裁剪，示例裁剪逻辑如下：

// 可在渲染函数的g标签内部最开头定义裁剪路径
<defs>
  <clipPath id="avatarClip">
    <circle cx="0" cy="10" r="10" />
  </clipPath>
</defs>
// 给image标签添加clipPath属性
<image
  x="-10"
  y="0"
  width="20"
  height="20"
  href={nodeDatum.avatar}
  clipPath="url(#avatarClip)"
  onClick={toggleNode}
/>

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