使用D3绘制Sankey Diagram时links着色失效问题求助

核心原因定位 #

出现该问题的常见原因有3类，按出现概率从高到低排列：

• 调用color()函数时传入的link关联字段取值错误
  节点着色时传入的是node.name或者node.group这类已定义的字段，而给link着色时大概率误用了link.source/link.target原始对象，而非link.source.name这类实际要匹配的取值，color()接收未匹配到的输入值时会返回undefined，直接导致着色失效。
• color()比例尺的定义域未覆盖link关联的字段取值
  如果你的color比例尺是基于节点的name/group字段生成的定义域，而部分link关联的取值不在定义域内，ordinal比例尺会返回隐式的unknown值（默认是undefined），不会抛出错误但无法正常渲染颜色。
• 着色属性名书写错误
  D3桑基图的link填充/描边属性要注意：绝大多数示例中link是用半透明描边实现的，属性名是stroke而非fill，写错属性名也会看起来没有着色效果。

验证修复步骤 #

1. 先在link的着色逻辑处加日志打印color()的返回值，确认是否为undefined：

console.log(color(link.source.name), link.source.name) // 替换为你实际传给color的参数

2. 如果返回undefined，先调整传入参数为link关联节点的对应字段，和节点着色的入参格式保持完全一致。
3. 如果参数没问题，给color比例尺显式设置unknown兜底值：

const color = d3.scaleOrdinal()
  .domain(nodes.map(d => d.name)) // 替换为你的定义域字段
  .range(d3.schemeCategory10)
  .unknown("#ccc") // 未匹配到的取值默认返回灰色

4. 确认link路径的着色属性用的是stroke而非fill，可配合stroke-opacity设置透明度优化显示效果。

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