Question

我制作了一个小图以显示来自蓝牙设备的一些数据。我使用了为VegaEmbed找到的样本，这非常容易。但是该示例使用计时器来获取数据，因此即使没有数据，数据集也会被更改。从网站另一部分更新VegaEmbed内部数据的简单方法是什么？我无法调用res.view.change（'table'，changeSet）.run（）;从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中更新数据的最简单方法

1 个答案: