0
ボトルとd3.jsを使用してデータを表示しています。jsonオブジェクトをボトルテンプレートに正しく渡す
root.x0 = height/2;
<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>
ラインを投げている:の.tplファイルがある
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)
:私は、データを取得するには、テンプレートファイルにそれを渡すためにボトルを使用していますエラーundefined is not an object (evaluating root.x0 = height/2)
。このツリーのコードは、http://bl.ocks.org/d3noob/8375092です。そこのデータ構造treeData
は次のように定義されます
var treeData = [
{
"name": "Top Level",
"parent": "null",
"children": [
"children"
]
}
];
しかし、私のブラウザで息子が連載されている(あるいは少なくともそれはと表示されます)のように:
var treeData = {"name": "my name", "parent": "null", "children": "children"}
どのように私はこれを整理することができますか?私はいつもjsonオブジェクト(dictまたはdictsのリスト)を渡すつもりです。私はJavaScriptで直接
var treeData = = [
{
"name": "Top Level",
"parent": "null",
"children": [
"children"
]
}
];
で
var treeData = {{!package}}
を交換した場合の例では、正常に動作します。実際に