在 vega-lite 图形之间共享数据

Question

我有一个带有两个 vega-lite 图形的站点，这些图形显示了动态生成的同一数据集的不同方面（类似于本示例）。 目前，他们都拥有自己的这个数据集版本。

由于数据集往往会变得非常大，我希望它们在它们之间共享数据，因此它们使用更少的内存。

由于数据将在稍后更新（来自函数update_vega() ），我不能将其放入变量并将其嵌入到两个图中。

在 vega-lite 中是否可以让多个图形共享相同的数据对象，我该怎么做？

这是我的代码（我 3 天前才开始学习 javascript，所以我很高兴每个级别的反馈）：

<!DOCTYPE html>
<html>
<body>
<!-- setup of the vega graph -->
<script src="https://cdn.jsdelivr.net/npm/vega@5.10.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.3.2"></script>
<div id="vega_graph_one"></div>
<div id="vega_graph_two"></div>
<script>
  var vlSpec_one = {
      $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
      data: { name: 'table', values: [{"time":11, "age": 4},{"time":12, "age": 4},{"time":11, "age": 5}]},
      width: 400,
      mark: 'bar',
      encoding: {
          x: {field: 'time', type: 'quantitative', binned: true},
          y: {aggregate: "count", type: 'quantitative'},
          color: {field: 'age', type: 'quantitative'}
      }
  }
  var vlSpec_two = {
      $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
      data: { name: 'table', values: [{"time":11, "age": 4},{"time":12, "age": 4},{"time":11, "age": 5}]},
      width: 400,
      mark: 'point',
      encoding: {
          x: {field: 'time', type: 'quantitative'},
          y: {field: 'age', type: 'quantitative'},
      }
  }
  // two global variables so the view can be updated from an outside function
  var view_one;
  var view_two;
  vegaEmbed('#vega_graph_one', vlSpec_one).then(
      result => { view_one = result.view;},
      reason => { console.error(reason);}
  )
  vegaEmbed('#vega_graph_two', vlSpec_two).then(
      result => { view_two = result.view;},
      reason => { console.error(reason);}
  )

  // update the vega graph from outside

  // call with update_vega([{"time":11, "age": 4},{"time":12, "age": 4},{"time":9, "age": 6}])
  function update_vega(event_data){
      var changeSet = vega.changeset()
          .insert(
              event_data
          );
      // data dublication happense here
      view_one.change("table", changeSet).run();
      view_two.change("table", changeSet).run();
  }
</script>
</body>
</html>

Answer 1

首先，考虑将您的数据放在 javascript 函数中并在数据中调用它，对于数据和图表来说应该更容易维护：

function getData(){
 var mydata = [{"time":11,"age": 4},{"time":12,"age": 4},{"time":11, "age":5}];

return mydata;
}

然后你可以调用它：

{
  "data": getData(),
  "mark": {"type" : "bar"}
}

有几个概念有助于根据您的需要实现数据共享。 您只需要一个vegaEmbed和一个使用以下其中一项的vlSpec ：

图层

将数据放在所有图层的顶部，并从每个标记的图层引用它

{
  "data": {"values":getData()},
  "layer": [
   {
     "mark": {"type" : "bar"}
   },
   {
     "mark": {"type" : "point"}
   }
 ]
}

康卡特

vconcat 、 hconcat和concat可用于生成多个不同mark图表，每个图表都使用相同的数据，但它并不完全适合您的情况，因为每个mark x 和 y 字段都不同。 阅读有关串联视图的更多信息

{
  "data": {"values":getData()},
  "concat": [
   {
     "mark": {"type" : "line"},
     "encoding": {
       "x": {"field": "time"},
       "y": {"field": "age"}
     }
   },
   {
     "mark": {"type" : "bar"},
     "encoding": {
       "x": {"field": "time"},
       "y": {"field": "age"}
     }
   }
 ]
}

在 vega-lite 图形之间共享数据

问题描述

1 个解决方案

解决方案1
1 2020-05-27 23:07:19

图层

康卡特

在 vega-lite 图形之间共享数据

问题描述

1 个解决方案

解决方案1 1 2020-05-27 23:07:19

图层

康卡特

解决方案1
1 2020-05-27 23:07:19