1

我正在尝试为 vega-lite 编写一个代码编辑器（很像他们提供的那个，但有一些附加功能）。为什么 vega-lite 不能运行从 textarea 获取的代码，我该如何解决这个问题？

<!DOCTYPE html>
<html>
<head>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.33/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.5/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.17/vega-embed.js"></script>

</head>
<body>

<div id="editor" style="float:left"><textarea id="input" rows="30" cols="60">

  {
  "description": "Election Results 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}
    ]},
  "width": 400, "height": 266,
  "mark": "area",

  "encoding": {
    "x": {
      "timeUnit": "year", "field": "date", "type": "temporal",
      "axis": {"labelAngle": 0, "title": "Year"}
    },

    "y": {
      "aggregate": "sum", 
      "field": "count", 
      "type": "quantitative",
      "axis": {"title": "Avg. Unemployment"}
        }}

</textarea></div>

<div style="float:left">&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div id="vis" style="float:left"></div>

<script type="text/javascript">

  function specs() {
    return document.getElementById("input").value;
    }

vega.embed('#vis', specs(), actions=false);

</script>
</body>
</html>

任何帮助将不胜感激。

4

0 回答 0