如何在Vega中对径向树布局（Radial Tree Layout）进行平移和缩放？

核心思路是将Vega的平移缩放交互与径向树的极坐标转笛卡尔坐标的计算绑定，无需修改径向树布局本身，只需在坐标映射阶段注入变换参数。以下是具体实现步骤：

1. 定义核心控制信号 #

先声明用于控制缩放比例和平移偏移的信号，可添加范围限制避免过度缩放：

"signals": [
  {"name": "zoomScale", "value": 1, "min": 0.2, "max": 5},
  {"name": "translateX", "value": 0},
  {"name": "translateY", "value": 0}
]

2. 绑定缩放平移交互 #

添加zoom交互，将交互事件的缩放比例和平移值同步到上述信号：

"interactions": [
  {
    "type": "zoom",
    "on": [
      {"signal": "zoomScale", "update": "event.scale"},
      {"signal": "translateX", "update": "event.translate[0]"},
      {"signal": "translateY", "update": "event.translate[1]"}
    ]
  }
]

如果需要区分平移和缩放的触发方式，可添加modifiers参数，比如"modifiers": ["shift"]设置为Shift+拖拽平移、滚轮缩放。

3. 调整节点与连线的坐标计算 #

径向树布局输出的是angle（角度）和radius（半径），在转换为笛卡尔坐标时，要叠加缩放和平移参数：

• 节点坐标：

"x": {"signal": "translateX + (zoomScale * datum.radius * cos(datum.angle))"},
"y": {"signal": "translateY + (zoomScale * datum.radius * sin(datum.angle))"}

• 节点尺寸/文本大小（可选）：如果希望节点和文本不随缩放变形，用1/zoomScale抵消缩放影响：

"size": {"signal": "400 / (zoomScale * zoomScale)"}, // 节点大小
"fontSize": {"signal": "12 / zoomScale"} // 文本字号

• 连线路径：对于树的连线（links），路径生成时每个点都要应用同样的变换，示例：

"path": {
  "signal": "line('horizontal', [
    {x: translateX + zoomScale * datum.source.radius * cos(datum.source.angle), y: translateY + zoomScale * datum.source.radius * sin(datum.source.angle)},
    {x: translateX + zoomScale * datum.target.radius * cos(datum.target.angle), y: translateY + zoomScale * datum.target.radius * sin(datum.target.angle)}
  ])"
}

简化示例片段 #

{
  "signals": [
    {"name": "zoomScale", "value": 1, "min": 0.2, "max": 5},
    {"name": "translateX", "value": 0},
    {"name": "translateY", "value": 0}
  ],
  "data": [/* 你的树数据 */],
  "transform": [/* 径向树布局变换 */],
  "marks": [
    {
      "type": "symbol",
      "from": {"data": "nodes"},
      "encode": {
        "enter": {"fill": {"value": "#4285F4"}},
        "update": {
          "x": {"signal": "translateX + (zoomScale * datum.radius * cos(datum.angle))"},
          "y": {"signal": "translateY + (zoomScale * datum.radius * sin(datum.angle))"},
          "size": {"signal": "400 / (zoomScale * zoomScale)"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "nodes"},
      "encode": {
        "enter": {"text": {"field": "name"}, "fill": {"value": "#333"}},
        "update": {
          "x": {"signal": "translateX + (zoomScale * datum.radius * cos(datum.angle)) + 15 * cos(datum.angle)"},
          "y": {"signal": "translateY + (zoomScale * datum.radius * sin(datum.angle)) + 15 * sin(datum.angle)"},
          "fontSize": {"signal": "12 / zoomScale"}
        }
      }
    }
  ],
  "interactions": [
    {
      "type": "zoom",
      "on": [
        {"signal": "zoomScale", "update": "event.scale"},
        {"signal": "translateX", "update": "event.translate[0]"},
        {"signal": "translateY", "update": "event.translate[1]"}
      ]
    }
  ]
}

关键注意事项 #

• 径向树布局的tree变换无需修改，保持原本的极坐标输出即可。
• 所有依赖布局坐标的元素（节点、文本、连线）都必须同步应用缩放平移参数，否则会出现错位。

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