Question

我试图使用简单的示例在一个苗条的组件中创建一个vega-lite嵌入式图形。我得到的是vegaEmbed未定义。

我之前已经通过npm安装了vega，vega-lite和vega-embed

<script>
    import { onMount } from 'svelte';
    import * as vega from "vega"
    import * as vega-lite from "vega-lite"
    import * as vegaEmbed  from "vega-embed";
    onMount(() => {
    let yourVlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
        description: 'A simple bar chart with embedded data.',
        data: {
          values: [
            {a: 'A', b: 28},
            {a: 'B', b: 55},
            {a: 'C', b: 43},
            {a: 'D', b: 91},
            {a: 'E', b: 81},
            {a: 'F', b: 53},
            {a: 'G', b: 19},
            {a: 'H', b: 87},
            {a: 'I', b: 52}
          ]
        },
        mark: 'bar',
        encoding: {
          x: {field: 'a', type: 'ordinal'},
          y: {field: 'b', type: 'quantitative'}
        }
      };
      vegaEmbed('#vis', yourVlSpec);
        })
</script>
<div id="vis"></div>

我希望仅显示一个vegalite图，接下来，我希望它从父组件获取其规格。

Answer 1

如果您直接将脚本导入到index.html或遵循特定的HTML，则您的选项将起作用。

<script src="https://cdn.jsdelivr.net/npm/vega@5.4.0/build/vega.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0/build/vega-lite.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0/build/vega-embed.js"></script>

根据https://github.com/vega/vega-embed/blob/v4.0.0/README.md中的文档，npm版本公开了另一种方法，即embed。请查看自述文件中的“ API参考”部分。

您可以尝试

embed('#vis', yourVlSpec)

请注意，spec参数将字符串参数视为URL，应返回JSON。因此，如果您的规范是字符串，则最好在调用JSON.parse(yourSpec)函数之前先进行embed。

这就是我在角度项目中所做的事情。注意：以下是使用打字稿的特定示例。：D

首先从您的node_modules导入embed函数。 import {default as embed} from 'vega-embed;
然后在组件内部的函数中，我调用了embed方法。
在我的情况下是组件初始化期间调用的ngOnInit。

`ngOnInit（）{

//选项1：使用字符串规范。 let spec = { "$schema": "https://vega.github.io/schema/vega-lite/v3.json", "description": "Simple bar chart", "data": { "values": [ {"x": "A", "y": 28}, {"x": "y", "B": 55}, {"x": "C", "y": 43}, {"x": "D", "y": 91}, {"x": "E", "y": 81}, {"x": "F", "y": 53}, {"x": "G", "y": 19}, {"x": "H", "y": 87}, {"x": "I", "y": 52} ] }, "mark": "bar", "encoding": { "x": {"field": "x", "type": "ordinal"}, "y": {"field": "y", "type": "quantitative"} } }; embed（“＃vis”，“ /assets/data/spec2.json”，{动作：假}）。catch（错误=> console.log（错误））;

//选项2：规范在我的项目资产中另存为json文件。
embed（“＃vis2”，JSON.parse（spec），{动作：假}）。catch（错误=> console.log（错误））; }`

Answer 2

安装官方 svelte-vega 包。它同时支持 Vega 和 Vega-Lite 组件。

npm install svelte-vega

按照此处的说明操作：https://github.com/vega/svelte-vega。

Answer 3

我无法使用汇总功能，因此@theWebalyst建议我切换到webpack。这里有一个模板：https://github.com/sveltejs/template-webpack

类似

<script>
    import {default as vegaEmbed} from 'vega-embed';
    export let name;

    var spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";

    vegaEmbed("#viz", spec, { actions: false }).catch(error => console.log(error) );

</script>

如何将vega-lite嵌入苗条组件中？

3 个答案: