2017-05-19 4 views
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}} 

を交換した場合の例では、正常に動作します。実際に

答えて

0

、これは変更することで、本当に簡単に解決することができます。

var treeData = {{!package}} 

var treeData = [{{!package}}]