我如何动态更改Vega架构

时间:2018-02-05 22:31:00

标签: vega vega-lite

我在Vega lite中有以下代码。我想将转换过滤器1850更改为2000.请建议我如何更改模式的转换过滤器。如果可能,还有动态数据更改和更新视图的示例示例。 人口数据来自 https://vega.github.io/editor/data/population.json



var yourVlSpec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
    "data": {
        "url": "https://vega.github.io/editor/data/population.json",
        "format": {
            "type": "json"
        }
    },
    "transform": [
      {
          "filter": "datum.year == 1850"
      }
    ],
    "mark": "bar",
    "encoding": {
        "x": {
            "aggregate": "sum",
            "field": "people",
            "type": "quantitative",
            "axis": {
                "title": "population"
            }
        }
    },
    "config": {
        "scale": {
            "rangeStep": 21
        }
    }
}

vegaEmbed('#vis', yourVlSpec).then(function (result) {
    result.spec.transform[0] = '{filter: "datum.year == 2000"}';

}).catch(console.error);

<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@3.0.10"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@2.1.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.0.0"></script>
  </head>
  <body>
    <div id="vis"></div>
    <div id="view"></div>
  </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您可以通过选择(https://vega.github.io/vega-lite/docs/selection.html)和基于该选择的过滤器(https://vega.github.io/vega-lite/docs/filter.html#selection-predicate)来实现这一目标。如果这不是一个选项,您将需要使用Vega Signals和Vega View API。