如何在React Google Charts实现的Sankey图节点添加自定义图标？

Google Charts原生的Sankey组件并不支持直接为节点添加自定义图标，不过可以通过叠加DOM元素的方式实现，核心思路是在图表渲染完成后，获取每个节点的位置坐标，然后在对应位置插入图标元素。

实现步骤及代码示例 #

1. 监听图表的ready事件，确保图表完全渲染后再操作DOM
2. 通过图表的布局接口获取所有节点的位置和尺寸
3. 根据节点信息匹配自定义图标，创建并定位图标元素

import { Chart } from "react-google-charts";

const SankeyWithCustomIcons = () => {
  const handleChartReady = (chartWrapper) => {
    const chart = chartWrapper.getChart();
    const container = chartWrapper.getContainer();
    const dataTable = chartWrapper.getDataTable();
    
    // 获取所有Sankey节点的边界信息（坐标、宽高）
    const nodeBounds = chart.getChartLayoutInterface().getBoundingBoxes('node');

    // 自定义图标映射表，key为节点名称，value为图标路径
    const iconMapping = {
      '节点A': '/icons/icon-a.svg',
      '节点B': '/icons/icon-b.png',
      '节点C': '/icons/icon-c.svg'
    };

    nodeBounds.forEach((bounds, nodeIndex) => {
      // 从数据表里获取当前节点的名称（根据你的数据结构调整索引）
      const nodeName = dataTable.getValue(nodeIndex, 0);
      const iconSrc = iconMapping[nodeName];

      if (!iconSrc) return;

      // 创建图标元素
      const iconElement = document.createElement('img');
      iconElement.src = iconSrc;
      
      // 设置图标样式：绝对定位、居中显示在节点上
      iconElement.style.position = 'absolute';
      iconElement.style.width = '24px';
      iconElement.style.height = '24px';
      iconElement.style.left = `${bounds.left + bounds.width / 2 - 12}px`;
      iconElement.style.top = `${bounds.top + bounds.height / 2 - 12}px`;
      iconElement.style.zIndex = 10; // 确保图标在图表上方

      container.appendChild(iconElement);
    });
  };

  // Sankey图数据（示例）
  const chartData = [
    ['From', 'To', 'Weight'],
    ['节点A', '节点C', 5],
    ['节点B', '节点C', 3],
    ['节点C', '节点D', 7]
  ];

  // 图表配置
  const chartOptions = {
    sankey: {
      node: {
        nodePadding: 60,
        width: 35,
        colors: ['#2ecc71', '#3498db', '#9b59b6']
      }
    }
  };

  return (
    // 外层容器设置相对定位，让图标绝对定位基于该容器
    <div style={{ position: 'relative', width: '100%', height: '400px' }}>
      <Chart
        chartType="Sankey"
        data={chartData}
        options={chartOptions}
        onReady={handleChartReady}
        width="100%"
        height="100%"
      />
    </div>
  );
};

export default SankeyWithCustomIcons;

关键注意事项 #

• 必须给图表外层容器设置position: relative，否则图标会基于整个文档定位，导致位置错误
• 如果图表存在缩放、拖拽或窗口 resize 操作，需要在对应的事件（比如onResize）里重新计算图标位置，避免错位
• 若使用SVG图标，可以直接创建<svg>元素插入，相比<img>能更灵活地修改颜色、尺寸等属性
• 注意图标的z-index值，确保它能显示在Sankey节点的上方

内容的提问来源于stack exchange，提问作者Ashley Alex Jacob