基于Force Transform的Beeswarm图实现Zooming与Panning效果咨询

完全可以实现，核心是在Vega配置中结合缩放平移选择器，将其变换逻辑注入到力导向布局的位置计算中，同时同步更新坐标轴范围。以下是可直接运行的完整示例代码：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 600,
  "height": 300,
  "padding": 5,
  "signals": [
    {
      "name": "cx", "update": "width / 2"
    },
    {
      "name": "cy", "update": "height / 2"
    }
  ],
  "data": [
    {
      "name": "table",
      "url": "data/movies.json",
      "transform": [
        {
          "type": "filter",
          "expr": "datum['IMDB Rating'] != null && datum['Rotten Tomatoes Rating'] != null"
        },
        {
          "type": "sample",
          "size": 200
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"data": "table", "field": "IMDB Rating"},
      "range": "width",
      "zero": false,
      "nice": true
    },
    {
      "name": "color",
      "type": "linear",
      "domain": {"data": "table", "field": "Rotten Tomatoes Rating"},
      "range": {"scheme": "redyellowblue"}
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "x",
      "title": "IMDB Rating",
      "domain": true,
      "tickCount": 5,
      "encode": {
        "labels": {
          "update": {
            "text": {"signal": "format(datum.value, '.1f')"}
          }
        }
      },
      "translate": {"signal": "[0, height - 10]"},
      "domainRaw": {"signal": "zoom['x'] ? zoom['x'].domain : scale('x').domain()"}
    }
  ],
  "marks": [
    {
      "name": "points",
      "type": "symbol",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "fill": {"scale": "color", "field": "Rotten Tomatoes Rating"},
          "size": {"value": 100},
          "tooltip": {
            "signal": "{'IMDB': datum['IMDB Rating'], 'Rotten Tomatoes': datum['Rotten Tomatoes Rating']}"
          }
        },
        "update": {
          "x": {"signal": "zoom['x'] ? zoom['x'](scale('x', datum['IMDB Rating'])) : scale('x', datum['IMDB Rating'])"},
          "y": {"field": "y"},
          "fillOpacity": {"value": 0.8}
        }
      },
      "transform": [
        {
          "type": "force",
          "iterations": 300,
          "static": false,
          "forces": [
            {
              "force": "x",
              "x": {"signal": "zoom['x'] ? zoom['x'](scale('x', datum['IMDB Rating'])) : scale('x', datum['IMDB Rating'])"},
              "strength": 0.1
            },
            {
              "force": "collide",
              "radius": 8
            }
          ]
        }
      ]
    }
  ],
  "selections": {
    "zoom": {
      "type": "interval",
      "bind": "scales",
      "translate": "[cx, cy]",
      "zoom": "wheel!"
    }
  }
}

关键实现细节： #

• 缩放平移选择器：定义zoom选择器，绑定鼠标拖拽和滚轮操作，关联到x轴刻度
• 力布局适配：在force transform的x力计算中，直接应用zoom选择器的变换逻辑，确保力导向布局基于缩放后的坐标重新计算节点位置
• 坐标轴同步：通过domainRaw属性让x轴范围跟随zoom选择器的变化自动更新
• 节点位置更新：在mark的x属性中同样应用zoom变换，保证节点显示位置与力布局计算一致

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