使用 Vega 从 javascript 函数绘制数据

Question

我想使用 Vega 或 Vega-Lite 交互式地绘制一个函数（即函数有一个可以改变的参数）。据我所知，data 参数只能来自文件或对象。

显然，每次函数参数更改时我都可以重新创建整个 graph/spec，但我宁愿只更新数据，因此不需要重新渲染整个图形。有办法吗？

我的功能对于 Vega 的内置表达系统来说太复杂了，所以请不要建议。

Answer 1

您可以使用 Vega view API 执行此操作。以下是将动态生成的数据插入 Vega-Lite 图表的脚本示例：

var spec = {
  $schema: 'https://vega.github.io/schema/vega-lite/v3.json',
  data: {name: 'table'},
  width: 400,
  mark: 'line',
  encoding: {
    x: {field: 'x', type: 'quantitative', scale: {domain: [0, 100]}},
    y: {field: 'y', type: 'quantitative', scale: {domain: [-1, 1]}}
  }
};

function makeData(N) {
  data = [];
  for (x = 0; x < N; x++) {
    data.push({x: x, y: Math.sin(x / 10)})
  }
  return data
}

vegaEmbed('#chart', spec).then(function(res) {
  var changeSet = vega.changeset().insert(makeData(100));
  res.view.change('table', changeSet).run();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.7.0/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/5.1.3/vega-embed.js"></script>
<div id="chart"></div>

使用 Vega 从 javascript 函数绘制数据

Plot data from javascript function using Vega

vega

vega-lite