Обмен данными между графами Vega-Lite - PullRequest
Новая
       60

Обмен данными между графами Vega-Lite

0 голосов
/ 19 марта 2020

У меня есть сайт с двумя графиками vega-lite, которые показывают разные аспекты одного и того же набора данных, который генерируется динамически (аналогично этому примеру). В настоящее время они оба владеют собственной версией этого набора данных.

Поскольку набор данных имеет тенденцию становиться достаточно большим, я хотел бы, чтобы они обменивались данными между ними, чтобы они использовали меньше памяти.

Поскольку данные будет обновлено позже (из функции update_vega()). Я не могу просто поместить ее в переменную и встроить в обе диаграммы.

Возможно ли в vega-lite иметь несколько графиков, совместно использующих одни и те же данные? -объект и как я могу это сделать?

Вот мой код (я только учил javascript 3 дня go, поэтому я очень рад обратной связи по каждые уровень): 

<!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>
...