vega - Vega/Lite 中的动画

Question

我尝试实现类似于 https://vimeo.com/177767802 中所示的动画(2 点 30 分)

我的代码如下:

{
  "data": {
    "values": [
      {"A": 2,"B": 3,"C": 4,"D": "a"},
      {"A": 1,"B": 2,"C": 1,"D": "a"},
      {"A": 4,"B": 5,"C": 15,"D": "b"},
      {"A": 9,"B": 10,"C": 80,"D": "b"}
    ]
  },
  "mark": "circle",
  "select": {"id": {"type": "point","on": "mauseover"}},
  "encoding": {
    "x": {"field": "A","type": "quantitative"},
    "y": {"field": "B","type": "quantitative"},
    "color": [
      {"if": "id","field": "D","type": "nominal"},
      {"value": "grey"}
    ],
    "size": {"value": 100}
  },
  "config": {"mark": {"fillOpacity": 0.5}}
}

基本上它与视频中的代码相同，唯一的区别是我使用了一个较小的数据集(我从 H. Wickham 那里获取。)

我尝试使用 Vega-Lite 编辑器 ( https://vega.github.io/vega-editor/?mode=vega-lite&renderer=svg ) 渲染绘图。生成的散点图是正确的，圆圈是灰色的(它们应该是灰色的)，但它不显示任何动画并且图例已损坏。

我的问题是代码是否有问题，我忽略了。如果代码是正确的，但问题是我使用的是 Vega-Lite 1.0 而不是 Vega-Lite 2.0，有没有办法在 Vega 中使用 Vega-Lite 2.0(完全理解使用 alfa 版本代码的风险) -精简版编辑器？

Answer 1

现在是 2021 年，您也可以查看 Gemini旨在将数据语法扩展到 单 View Vega/Vega-Lite 图表的一些简单动画