如何将 vega-lite 嵌入到 svelte 组件中？

Question

我尝试使用这个简单的示例在一个 svelte 组件中制作一个 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)

请注意，规范参数将字符串参数视为 URL，应该 return 和 JSON。所以如果你的规格是字符串，那么在调用 embed 函数之前做一个 JSON.parse(yourSpec) 会很好。

我在 angular 项目中就是这样做的。注意：以下是使用打字稿的特定示例.. :D

首先从您那里导入嵌入功能node_modules。 import {default as embed} from 'vega-embed;
然后在我组件内的一个函数中我调用了 embed 方法。
在我的例子中，它是在组件初始化期间调用的 ngOnInit。

ngOnInit() {

   // option 1: using a string spec.
   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", { actions: false }).catch(error =>
     console.log(error)
   );



   // option 2: where the spec is saved as a json file in my project assets.    
   embed("#vis2", JSON.parse(spec), { actions: false }).catch(error =>
     console.log(error)
   );
 }

Answer 2

我无法使用 rollup，所以 @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>

Answer 3

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

npm install svelte-vega

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

如何将 vega-lite 嵌入到 svelte 组件中？

How to embed vega-lite in svelte component?

vega

vega-lite

svelte