Question

我开始使用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进行其他变体，但没有成功。

任何帮助将不胜感激。

谢谢

Answer 1

让我回答我自己的问题。

首先，我使用了jQuery：

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

我删除了url标记，一开始不加载JSON文件：

  "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);
});

它就像一种魅力！

Vega Vega-lite流

1 个答案: