可以使用修改Node Id的方式,为每个节点添加一个唯一ID,从而解决相同的源名称问题。以下是包含代码示例的实现方法:
const nodes = [
{ name: 'Sankey', id: '123' },
{ name: 'Chart', id: '456' },
{ name: 'AntV', id: '789' },
{ name: 'Sankey', id: '101' },
];
const edges = [
{ source: '123', target: '456', value: 2 },
{ source: '456', target: '789', value: 5 },
{ source: '789', target: '101', value: 3 },
];
const sankeyPlot = new G2Plot.Sankey('container', {
data: {
nodes,
edges,
},
nodeWidthRatio: 0.008,
nodePaddingRatio: 0.03,
color: ['#ce746e', '#e39f75', '#f3d59d', '#90ca8f', '#4eacbf', '#5e6db3'],
tooltip: {
title: 'name',
// 使用自定义模版字符串,用 ID 替换 name
formatter: ({ name, id }) => {
return `
ID: ${id}
Name: ${name}
`;
},
},
});
在上面的代码中,我们为每个节点添加了一个唯一的ID,并将ID作为源指向数据中edges中的target。然后,通过在tooltip中使用自定义模板字符串,在工具提示中显示ID和名称。这样,即使在不同的列/分类中有两个或多个相同的源名称,我们也能够使用唯一的ID来区分它们,从而正确地绘制Sankey图。