如何在Plotly中创建带有渐变色连接线的Sankey桑基图

可以实现符合要求的效果，目前Plotly原生还未内置连接线渐变的直接配置项，可通过以下两种方案落地，最终输出均为可嵌入HTML的矢量格式：

这是当前成本最低的实现方式，不需要额外二次处理，直接配置参数即可使用：

• 为每个连接线设置与对应源节点一致的颜色，添加0.5~0.7的透明度，叠加后会自然呈现出接近源到目标过渡的视觉效果
• 参考代码示例：

import plotly.graph_objects as go

fig = go.Figure(data=[go.Sankey(
    node = dict(
      pad = 15,
      thickness = 20,
      line = dict(color = "black", width = 0.5),
      label = ["A", "B", "C", "D", "E", "F"],
      color = ["#2ecc71", "#3498db", "#e74c3c", "#f1c40f", "#9b59b6", "#1abc9c"]
    ),
    link = dict(
      source = [0, 1, 0, 2, 3, 3],
      target = [2, 3, 3, 4, 4, 5],
      value = [8, 4, 2, 8, 4, 2],
      # 每个连接线取对应源节点颜色，添加透明度
      color = ["rgba(46,204,113,0.6)", "rgba(52,152,219,0.6)", "rgba(46,204,113,0.6)", "rgba(231,76,60,0.6)", "rgba(241,196,15,0.6)", "rgba(241,196,15,0.6)"]
  )
)])

# 直接导出为可嵌入HTML的矢量格式文件
fig.write_html("sankey_demo.html")

如果必须要使用从源节点到目标节点的真实线性渐变效果，可通过导出后处理实现：

• 先将生成的桑基图通过fig.write_image("sankey.svg")导出为矢量SVG格式
• 在SVG的defs标签中为每个连接线单独定义线性渐变，渐变起始色对应源节点颜色，结束色对应目标节点颜色
• 将每个连接线的path元素fill属性替换为对应渐变ID即可
• 处理完成的SVG可直接嵌入HTML使用，也可通过JS动态修改HTML内Plotly生成的SVG元素实现带交互的渐变效果，完全保留矢量属性

两种方案均不会损失矢量清晰度，可根据需求灵活选择。

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