AntV Sankey图表同名不同维度源节点识别问题求助

AntV Sankey 图表默认通过节点名称的字符串值判断节点唯一性，没有内置配置项可以自动区分不同维度下的同名节点，需要通过处理数据源来解决这个问题。

解决思路 #

给不同维度下的同名节点添加唯一标识（比如维度名称前缀/后缀），让节点名称在全局唯一；同时通过格式化配置，在显示时隐藏标识，保持界面友好。

修改代码示例 #

1. 处理数据源，给节点添加维度标识并保留原始名称：

function SankeyChartComponent() {
  const Context = React.useContext(DataComponentContext);
 const dimensions = [...Context.converse?.colType?.date, ...Context.converse.colType?.dim];
  const metrics = [...Context.converse?.colType?.metrics];
  const originalData = [...Context.converse?.val];

  const sankeyData: any[] = [];
  
  originalData.forEach((d) => {
    dimensions.reduce((a, b) => {
      if (a && b) {
        sankeyData.push({
          source: `${d[a]}(${a})`, // 为source节点添加维度标识保证唯一性
          target: `${d[b]}(${b})`, // 为target节点添加维度标识保证唯一性
          value: d[metrics[0]],
          originalSource: d[a], // 保留原始source名称用于显示
          originalTarget: d[b]  // 保留原始target名称用于显示
        });
      }
      return b;
    });
  });

  return (
      <div className="SankeyChartComponent" style={{ height: Context.chatRenderHeight }}>
        <SankeyChart
          name={'sankey'}
          theme={Context.ChartThemeColors}
          sourceField={Context.RuleConfig?.params?.sourceField}
          targetField={Context.RuleConfig?.params?.targetField}
          weightField={Context.RuleConfig?.params?.weightField}
          data={sankeyData}
          chartProps={{
            ...Context.basicChartConfig,
            ...config,
            // 配置节点标签显示原始名称
            label: {
              formatter: (datum) => datum.originalSource || datum.originalTarget || datum.name
            },
            // 配置tooltip显示原始名称
            tooltip: {
              formatter: (datum) => ({
                name: datum.originalSource || datum.originalTarget || datum.name,
                value: datum.value
              })
            }
          }}
        />
      </div>
    );
}

说明 #

• 核心逻辑：通过给节点名称拼接维度信息，确保每个节点的全局唯一性，避免Sankey图表将不同维度下的同名节点合并。
• 格式化配置：通过label.formatter和tooltip.formatter将显示内容还原为原始节点名称，不影响用户体验。

内容的提问来源于stack exchange，提问作者SAI LALITH KUMAR RAJU K