我正在尝试为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"> </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>
非常感谢任何帮助。