在 VegaEmbed 中更新数据的最简单方法

Question

我制作了一个小图表来显示来自蓝牙设备的一些数据。我使用了为 VegaEmbed 找到的示例，这一切都非常简单。但是示例使用定时器获取数据，因此即使没有数据，数据集也会发生变化。从网站的另一部分更新 VegaEmbed 内部数据的简单方法是什么？我无法调用 res.view.change('table', changeSet).运行();来自 VegaEmbded..

这是代码的快照：

(有蓝牙数据时调用handleDataChanged函数)

function handleDataChanged(event) {
var value = event.target.value;

  value = value.buffer ? value : new DataView(value);
      let result = {};
      let index = 1;
      datapointx = value.getInt16(index, /*littleEndian=*/false);
        console.log('X: ' + value.getInt16(index, /*littleEndian=*/false));
        index += 2;

      datapointy = value.getInt16(index, /*littleEndian=*/true);
      console.log('Y: ' + value.getInt16(index, /*littleEndian=*/false));
      index += 2;

      datapointz = value.getInt16(index, /*littleEndian=*/true);
      console.log('Z: ' + value.getInt16(index, /*littleEndian=*/false));
      index += 2;

}
</script>

<script>
  document.querySelector('button').addEventListener('click', function() {

      onButtonClick();

  });
</script>

<script type="text/javascript">
      var vlSpec = {
  $schema: 'https://vega.github.io/schema/vega-lite/v3.json',
  data: {name: 'table'},
  width: 400,
  mark: 'line',
  encoding: {
    x: {field: 'x', type: 'quantitative', scale: {zero: false}},
    y: {field: 'y', type: 'quantitative'},
    color: {field: 'category', type: 'nominal'}
  }
};
vegaEmbed('#chart', vlSpec).then(function(res) {
  /**
   * Generates a new tuple with random walk.
   */
  function newGenerator() {
    var counter = -1;
    var previousY = [5, 5, 5];
    return function() {
      counter++;
      var newVals = previousY.map(function(v, c) 
      {
        console.log('c = ' + c);
        var yval = 0;
        if (c == 0)
            yval = datapointx;
        if (c == 1)
            yval = datapointy;
        if (c == 2)
            yval = datapointz;      
        return {
          x: counter,
    //      y: v + Math.round(Math.random() * 10 - c * 3),
          y: yval,
          category: c
        };
      });
      previousY = newVals.map(function(v) {
        return v.y;
      });
      return newVals;
    };
  }

  var valueGenerator = newGenerator();
  var minimumX = -100;
  window.setInterval(function() {
    minimumX++;
    var changeSet = vega
      .changeset()
      .insert(valueGenerator())
      .remove(function(t) {
        return t.x < minimumX;
      });
    res.view.change('table', changeSet).run();
  }, 100);
});
</script>

Answer 1

更新现有 vega-lite 图表中数据的最简单方法是使用流数据模型。 Vega-Lite 文档中有一个示例：https://vega.github.io/vega-lite/tutorials/streaming.html

在 VegaEmbed 中更新数据的最简单方法

simplest way to update data in VegaEmbed

vega-lite