Vega Zoom Circle 包装图答案

【问题标题】：Vega Zoom Circle Packing ChartVega Zoom Circle 包装图
【发布时间】：2020-10-29 13:10:14
【问题描述】：

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

任何指针/示例将不胜感激。

【问题讨论】：

标签： vega

【解决方案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

【讨论】：