javascript - 尽管在 vega-lite 教程中一步步进行，但仍遇到 TypeError

Question

我一步一步地按照 Vega-Lite 的教程进行操作，但在我的 vegaEmbed 方法调用中仍然遇到了 TypeError

我尝试从 vl.Embed 切换到 vegaEmbed，但是 vl.Embed 未定义并且 vegaEmbed 返回了 TypeError。

我的 html 有一个 ID 为“vis”的 div 标签。以下代码位于我链接到 html 的 script.js 文件中。

// Vega lite bar chart

const VLSPEC = {
    "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
    "data":{
      "values":[
        {"a": "C", "b": 2},
        {"a": "C", "b": 7},
        {"a": "C", "b": 4},
        {"a": "D", "b": 1},
        {"a": "D", "b": 2},
        {"a": "D", "b": 6},
        {"a": "E", "b": 8},
        {"a": "E", "b": 4},
        {"a": "E", "b": 7}
      ]
    },
    "mark":"bar",
    "encoding": {
      "y":{"field":"a","type":"nominal"},
      "x":{"field":"b","type": "quantitative",       "aggregate":"average", "axis":{"title": "B mean"}} 
      }

  };

vegaEmbed('#vis',VLSPEC);

我希望绘制条形图(如 https://vega.github.io/vega-lite/site/demo.html 中所示)，但没有收到任何视觉输出，而是在 js 控制台中收到 TypeError。

vega-embed@4.2.0:1 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null

    at new ve (vega-embed@4.2.0:1)

    at vega-embed@4.2.0:1

    at Generator.next (<anonymous>)

    at vega-embed@4.2.0:1

    at new Promise (<anonymous>)

    at D (vega-embed@4.2.0:1)

    at je (vega-embed@4.2.0:1)

    at Ne (vega-embed@4.2.0:1)

    at script.js:26

Answer 1

您引用了 ID 为 “#vis” 的 DOM 元素，错误指示此 DOM 元素未定义。您应该在具有以下元素的 HTML 页面的上下文中执行此 javascript:

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

然后嵌入调用应该可以工作了。

您可以在 https://vega.github.io/vega-lite/site/demo.html 的页面源代码中看到这一点。 .