Question

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

显然，每次函数参数更改时，我都可以重新创建整个图形/规范，但是我只想更新数据，因此不需要重新呈现整个图形。有办法吗？

对于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函数绘制数据

1 个答案: