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 elemend，并且错误指示此DOM元素未定义。您应该在具有以下元素的HTML页面的上下文中执行此javascript：

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

，然后嵌入调用应该起作用。

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

尽管在vega-lite教程中循序渐进，但仍然遇到TypeError

1 个答案: