Javascript 将json对象正确传递给瓶子模板_Javascript_Python_D3.js_Bottle

Javascript 将json对象正确传递给瓶子模板

javascript python d3.js

Javascript 将json对象正确传递给瓶子模板,javascript,python,d3.js,bottle,Javascript,Python,D3.js,Bottle,我使用瓶子和d3.js来显示一些数据。我正在使用瓶子获取数据并将其传递到模板文件： from bottle import run from bottle import template import json app = Bottle() @app.route("/hello") def hello(): # .... code to read and clean the data my_data = [{"name": "my name", "parent": "null

我使用瓶子和d3.js来显示一些数据。我正在使用瓶子获取数据并将其传递到模板文件：

from bottle import run
from bottle import template
import json

app = Bottle()


@app.route("/hello")
def hello():
    # .... code to read and clean the data
    my_data = [{"name": "my name", "parent": "null", "children": "children"}]
    return template('tree', package=json.dumps(my_data))


run(app, host='localhost', port=8080, debug=True)

.tpl文件是：

<body>

<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var treeData = {{!package}};

//some javascript to display the data

// ************** Generate the tree diagram      ***************** 
var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;

var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

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

正在抛出错误

未定义不是对象（计算root.x0=height/2）

。此树的代码来自：。数据结构

treeData

定义如下：

var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
        "children"
    ]
  }
];

但在我的浏览器中，son被连续（或至少看起来是这样）为：

我怎样才能解决这个问题？我总是要传递一个json对象——dict或dict列表。如果我替换

var treeData = {{!package}}

与

直接在javascript中。

事实上，通过更改以下内容可以很容易地解决此问题：

var treeData = {{!package}}

到

var treeData = {{!package}}

var treeData = = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
        "children"
    ]
  }
];

var treeData = {{!package}}

var treeData = [{{!package}}]