Vega Zoom Circle 装箱图

Question

我有点迷路了。我试图实现放大圆形装箱图，但我不知道该怎么做。有两个示例 zoomable-scatter-plot zoomable-world-map，但这两种方法似乎都不太适合我的图表类型。

任何 pointers/examples 将不胜感激。

Answer 1

免责声明：我仍然没有太多时间进入 Vega，但我找到了解决这个特定问题的方法。我想它在技术上还不成熟，但它确实有效。

基本思想是缩放圆圈，然后将它们移动到图形的中间。为此，我添加了这些信号：

"signals": [
    {
      "name": "scaleX",
      "value": 1,
      "on": [{"events": "click", "update": "(width/2)/datum.r"}]
    },
    {
      "name": "scaleY",
      "value": 1,
      "on": [{"events": "click", "update": "(height/2)/datum.r"}]
    },
    {
      "name": "xTranslation",
      "value": 0,
      "on": [{"events": "click", "update": "(width/2) - datum.x * scaleX"}]
    },
    {
      "name": "yTranslation",
      "value": 0,
      "on": [{"events": "click", "update": "(height/2) - datum.y * scaleY"}]
    }
  ]

并在标记编码中使用它们：

"update": {
          "x": {"signal": "datum.x * scaleX + xTranslation"},
          "y": {"signal": "datum.y * scaleY + yTranslation"},
          "size": {"signal": "4 * datum.r * datum.r * scaleX * scaleY"},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 0.5}
        }

Full example in Vega-Editor

Vega Zoom Circle 装箱图

Vega Zoom Circle Packing Chart

vega