让 Vega-Lite / D3 在 Nuxt.js 中工作答案

【问题标题】：Getting Vega-Lite / D3 to Work in Nuxt.js让 Vega-Lite / D3 在 Nuxt.js 中工作
【发布时间】：2020-04-11 18:00:46
【问题描述】：

我正在尝试让一个简单的 Vega-Lite 可视化在 Nuxt 中工作并苦苦挣扎。这是 Vega-Lite 的 documentation on how to embed 一个简单的图表到一个 HTML 文件。

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.10.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.10.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.5.2"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      var 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>
  </body>
</html>

如何让该语法在 Nuxt 中工作？

我试过了：

<template>
<div>
  <div id="vis"></div>
</div>
</template>

<script>
import vegaEmbed from 'vega-embed'

export default {

  data() {
    return {
      chart1: {
              $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'}
        }
      }
    }
    },

    methods: {
      async draw(){

        let yourV1Spec = JSON.parse(this.chart1)
        await vegaEmbed('#vis', yourVlSpec);
      }      
    },
}

</script>

我显然做错了什么，因为它不起作用。不过，至少我知道数据部分工作正常。这是我无法弄清楚的 vegaEmbed 部分。

到目前为止，我能让它正常工作的唯一方法是在单独的 .js 文件中进行 Vega 可视化并将其导入到我的 .vue 文件中。

import vegaEmbed from 'vega-embed';

var yourV1Spec = {

{
        $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'}
        }
      };


    // Embed the visualization in the container with id `vis`
    vegaEmbed('#vis', yourVlSpec);

但是我将如何以更合适的 Vue / Nuxt 类型样式执行此操作并使其正常工作？

【问题讨论】：

标签： vue.js d3.js nuxt.js vega vega-lite

【解决方案1】：

在您失败的示例中，您将 JavaScript 对象 (this.chart1) 传递给 JSON.parse，它需要一个字符串。您在 javascript 错误控制台中看到任何提示了吗？

如果您只是调用await vegaEmbed('#vis', this.chart1);，也许它会起作用

此外，您的 draw 方法似乎不会在任何地方被调用。您可能希望将该代码放在类似 mounted 生命周期钩子之类的东西中，以便在渲染组件后运行 vega-embed 代码。

【讨论】：