解决D3.js与Highcharts中源目标相同时Sankey图不渲染的问题

我之前也碰到过一模一样的问题——Sankey图的**自环（源节点和目标节点相同）**场景，不管是D3.js还是Highcharts都没有默认支持，直接用原始数据会导致渲染异常。下面分别给你两种库的可行解决方案：

D3.js的Sankey布局默认不会处理自环链路，最稳妥的方式是预处理数据，将自环拆分为两个虚拟节点的连接，再通过视觉调整让虚拟节点和原节点重合：

• 拆分自环链路：把原自环的source和target改成带后缀的虚拟节点（比如"1"拆成"1_source"和"1_target"）
• 在nodes数组中添加这两个虚拟节点，保持它们的显示名称和原节点一致
• 渲染时通过位置调整或CSS样式，让虚拟节点和原节点重叠，视觉上呈现为同一个节点

修改后的测试数据示例：

var graph = { 
  "links": [ 
    {"source":"1_source","target":"1_target","value":"1.7"}, // 拆分后的自环链路
    {"source":"1","target":"2","value":"1.5"}, 
    {"source":"2","target":"3","value":"1.2"}, 
    {"source":"3","target":"4","value":"0.3"} 
  ], 
  "nodes": [ 
    {"name":"Energy","id":"1"}, // 原节点
    {"name":"Energy","id":"1_source"}, // 虚拟源节点
    {"name":"Energy","id":"1_target"}, // 虚拟目标节点
    {"name":"Industrial Processes","id":"2"}, 
    {"name":"Electricity and heat","id":"3"}, 
    {"name":"Electricity","id":"4"} 
  ] 
}

渲染时，你可以通过D3的位置设置，把1_source和1_target的坐标设为和1完全一致，或者用CSS隐藏虚拟节点的标签，只保留原节点的显示效果，这样自环就会呈现为节点内部的循环流向。

Highcharts的Sankey组件同样不支持原生自环，我们可以用类似的虚拟节点+自定义节点配置的方式处理：

• 将自环的from和to替换为虚拟节点
• 通过nodes配置项，把虚拟节点的大小设为0，位置和原节点重合，同时隐藏虚拟节点的标签

修改后的测试数据示例：

series: [{ 
  keys: ['from', 'to', 'weight'], 
  data: [ 
    { from: 'total', to: 'Useful kinetic energy', weight: 56, outgoing: true }, 
    { from: 'total_self_source', to: 'total_self_target', weight: 27, outgoing: true }, // 拆分后的自环
    { from: 'total', to: 'Sound loss', weight: 17, outgoing: true } 
  ],
  nodes: [
    { id: 'total', label: 'Total Energy' }, // 原节点
    // 虚拟源节点：大小为0，位置和原节点一致，隐藏标签
    { id: 'total_self_source', x: 0, y: 100, width: 0, height: 0, label: '' },
    // 虚拟目标节点：和源虚拟节点位置完全重合
    { id: 'total_self_target', x: 0, y: 100, width: 0, height: 0, label: '' }
  ]
}]

这种方式下，虚拟节点不会在图表中显示，自环链路会围绕原节点绘制，视觉上符合自环的需求。如果需要更自定义的自环样式，也可以在图表渲染完成后，通过Highcharts的renderer API手动绘制自环图形，但预处理数据的方式更简单易维护。

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