Vega Vega-lite 流媒体答案

【问题标题】：Vega Vega-lite streamingVega Vega-lite 流媒体
【发布时间】：2020-03-19 00:51:51
【问题描述】：

我开始使用 Vega，现在我正在尝试流式传输我的数据以很好地刷新我的图表。到目前为止，我关注了这个文档 (https://vega.github.io/vega-lite/tutorials/streaming.html)，但没有成功。我发现的示例在数组中有值，而我的示例在一个定期刷新的 JSON 文件中。我最终得到了这段代码，它可以正确显示我想要的图表，但它不会刷新我的数据。

<html>
  <head>
    <title>A title</title>
    <meta charset="utf-8" />

    <script src="https://cdn.jsdelivr.net/npm/vega@5.8.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.12"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.1.0"></script>

    <style media="screen">
      /* Add space between Vega-Embed links  */
      .vega-actions a {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
        <script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
var vlSpec = {
  data: {"url": "http://localhost:8123/d.json", "name":"table"},
  mark: "bar",
  "width": 1240,
  "encoding": {
    "y": {"field": "task", "type": "ordinal", "sort":"x2"},
    "x": {"field": "start", "type": "temporal", "aggregate":"sum"},
    "x2": {"field": "end", "type": "temporal"},
    "color": {"field": "status", "type": "nominal"}
  }
};
// Embed visualization and save view as window.view:
vegaEmbed('#vis', vlSpec).then(function(res) {
  window.setInterval(function() {
    var changeSet = vega
      .changeset()
      .insert()              
    res.view.change('table', changeSet).run();
  }, 1000);
});
  </script>
</body>
</html>

我的问题似乎是 insert()，在文档的示例中，他们插入了一个函数的结果来生成数据，我应该在此处插入我的 JSON 文件——我尝试了不同的 fetch 变体，但没有成功。

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： streaming vega vega-lite

【解决方案1】：

让我回答我自己的问题。

首先我使用了 jquery：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

我一开始去掉了不加载 JSON 文件的 url 标签：

  "data": {"name":'table'},

还有来自我的 JSON 文件的 VEGA 流数据：

vegaEmbed('#vis', vlSpec).then(function(res) {
var newdata ;
  window.setInterval(function() {
  jQuery.getJSON("http://localhost:8123/d.json", function(data) {
  newdata = data;
})
    var changeSet = vega
      .changeset()
      .remove(vega.truthy)
      .insert(newdata)
      console.log (newdata)
    res.view.change('table', changeSet).run();
  }, 1000);
});

它就像一个魅力！

【讨论】：