求助：如何在Vega/Vega Lite中实现自定义分解树可视化？

核心实现思路 #

• 基于树布局搭建骨架
  用Vega内置的tree或cluster布局处理层级数据，先计算出每个节点的坐标位置。你需要把带KPI信息的层级数据传入布局，比如：

  {
    "name": "总营收",
    "value": 100000,
    "diff": +5.2,
    "children": [
      {"name": "华东区域", "value": 45000, "diff": +8.1},
      {"name": "华南区域", "value": 35000, "diff": -2.3}
    ]
  }
  

• 将节点渲染为KPI卡片
  布局输出坐标后，用rect、text、group元素组合成KPI卡片样式：用矩形做背景，添加名称、数值、差异值（用颜色区分正负），还能在group里嵌入迷你图表——绑定对应节点的细分数据即可实现。
• 添加分支连线
  用line元素连接父节点与子节点，利用布局输出的source/target坐标确定连线起止点，调整线条样式匹配整体视觉。

关键注意事项 #

• 数据结构适配
  确保数据是标准嵌套层级结构，或用flatten转换为父子关联的扁平数据，适配树布局要求。
• 节点空间预留
  调整布局的size、nodeSize参数，给KPI卡片足够显示空间，避免节点重叠；横向分解树可设置布局方向为horizontal。
• 交互扩展（可选）
  若需展开/折叠分支，结合signal和toggle事件控制节点children的显示状态，动态更新布局与渲染。

节点渲染核心代码片段（Vega语法） #

{
  "marks": [
    // 分支连线
    {
      "type": "line",
      "from": {"data": "links"},
      "encode": {
        "update": {
          "x": {"field": "source.x"},
          "y": {"field": "source.y"},
          "x2": {"field": "target.x"},
          "y2": {"field": "target.y"},
          "stroke": {"value": "#ccc"},
          "strokeWidth": {"value": 1}
        }
      }
    },
    // KPI卡片节点
    {
      "type": "group",
      "from": {"data": "nodes"},
      "encode": {
        "update": {
          "x": {"field": "x", "offset": -80},
          "y": {"field": "y", "offset": -40},
          "width": {"value": 160},
          "height": {"value": 80},
          "fill": {"value": "#f8f9fa"},
          "stroke": {"value": "#dee2e6"},
          "cornerRadius": {"value": 4}
        }
      },
      "marks": [
        {"type": "text", "encode": {"update": {"x": {"value": 10}, "y": {"value": 20}, "text": {"field": "name"}, "fontSize": {"value": 14}}}},
        {"type": "text", "encode": {"update": {"x": {"value": 10}, "y": {"value": 45}, "text": {"field": "value", "format": ","}, "fontSize": {"value": 18}, "fontWeight": {"value": "bold"}}}},
        {"type": "text", "encode": {"update": {"x": {"value": 10}, "y": {"value": 65}, "text": {"field": "diff", "format": "+.1%"}, "fontSize": {"value": 12}, "fill": {"expr": "datum.diff > 0 ? '#28a745' : '#dc3545'"}}}}
      ]
    }
  ]
}

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