使用 Vega 从 javascript 函数中绘制数据答案

【问题标题】：Plot data from javascript function using Vega使用 Vega 从 javascript 函数中绘制数据
【发布时间】：2019-11-29 21:56:43
【问题描述】：

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

显然，我可以在每次函数参数更改时重新创建整个图形/规范，但我宁愿只更新数据，因此不需要重新渲染整个图形。有没有办法做到这一点？

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

【问题讨论】：

标签： vega vega-lite

【解决方案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.changeset().remove(() => true).insert(data); 否则添加更多时它不会删除所有旧数据。