如何在Vega Sankey图中实现矩形间的渐变连接边？

要让Sankey图的连接边从左侧节点颜色渐变到右侧节点颜色，需要修改边的填充设置，动态绑定源节点和目标节点的颜色，具体操作如下：

1. 确认节点颜色的获取方式 #

确保你的节点数据（nodes数组）包含颜色字段，或者通过颜色比例尺（scale）映射节点属性到颜色。比如如果你的节点颜色是通过category字段映射的，需保证颜色比例尺已定义：

"scales": [
  {
    "name": "color",
    "type": "ordinal",
    "domain": {"data": "nodes", "field": "category"},
    "range": {"scheme": "category10"}
  }
]

2. 修改Sankey边的填充渐变 #

找到代码中定义Sankey边的mark（通常是type: "sankey"的mark），将其encode.update.fill从固定渐变改为动态绑定源/目标节点颜色的渐变：

"marks": [
  {
    "type": "sankey",
    "from": {"data": "links"},
    "encode": {
      "update": {
        "fill": {
          "gradient": "linear",
          "x1": 0, "x2": 1,
          "stops": [
            {"offset": 0, "color": {"scale": "color", "field": "source.category"}},
            {"offset": 1, "color": {"scale": "color", "field": "target.category"}}
          ]
        },
        "fillOpacity": {"value": 0.6}
      }
    }
  }
]

如果节点数据直接包含color字段，可简化为：

"stops": [
  {"offset": 0, "color": {"field": "source.color"}},
  {"offset": 1, "color": {"field": "target.color"}}
]

3. 验证效果 #

修改后，连接边会自动从源节点的颜色平滑过渡到目标节点的颜色，替代原来固定的蓝红渐变。

内容的提问来源于stack exchange，提问作者黃翊唐