爲D3解析JSON的問題

Question

我正在用Flask和Python構建一個應用程序，並且我想將一些Python生成的結果傳遞給JSON，以便它們可以在容器流體下用D3可視化。爲此，我嘗試使用Jinja方法var myjson = {{jsonDict|tojson }};。這裏jsonDict是我的Python代碼中的一個變量，它是一個字典的字符串，其中單引號已被正則表達式的雙引號替換，所以它看起來像正確的JSON。我也使用JS方法root = JSON.parse(myjson);。我認爲，這兩者的結合應該解決我的問題，但是當我運行的代碼，但是我得到的錯誤：

(index):2222  
Uncaught SyntaxError: Unexpected token y in JSON at position 0 
uo @ d3.v3.min.js:3 
i @ d3.v3.min.js:1 

這裏是我試圖使用D3模板： http://bl.ocks.org/mbostock/7607535

這是我實現這個D3（只是相關的腳本）的：

<script> 

var margin = 20, 
    diameter = 960; 

var color = d3.scale.linear() 
    .domain([-1, 5]) 
    .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) 
    .interpolate(d3.interpolateHcl); 

var pack = d3.layout.pack() 
    .padding(2) 
    .size([diameter - margin, diameter - margin]) 
    .value(function(d) { return d.size; }) 

var svg = d3.select("#dan").append("svg") //#dan is name of my container fluid 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .append("g") 
    .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")"); 

//this is the part of the code I have added // 
var myjson = {{ jsonDict|tojson }}; 
root = JSON.parse(myjson); 
//this is the part of the code I have added //  

d3.json("root", function(error, root) { 
    if (error) throw error; //this is index 2222 

    var focus = root, 
     nodes = pack.nodes(root), 
     view; 

    var circle = svg.selectAll("circle") 
     .data(nodes) 
    .enter().append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
     .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }); 

    var text = svg.selectAll("text") 
     .data(nodes) 
    .enter().append("text") 
     .attr("class", "label") 
     .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
     .style("display", function(d) { return d.parent === root ? "inline" : "none"; }) 
     .text(function(d) { return d.name; }); 

    var node = svg.selectAll("circle,text"); 

    d3.select("#dan") 
     .style("background", color(-1)) 
     .on("click", function() { zoom(root); }); 

    zoomTo([root.x, root.y, root.r * 2 + margin]); 

    function zoom(d) { 
    var focus0 = focus; focus = d; 

    var transition = d3.transition() 
     .duration(d3.event.altKey ? 7500 : 750) 
     .tween("zoom", function(d) { 
      var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]); 
      return function(t) { zoomTo(i(t)); }; 
     }); 

    transition.selectAll("text") 
     .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) 
     .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; }) 
     .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) 
     .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); 
    } 

    function zoomTo(v) { 
    var k = diameter/v[2]; view = v; 
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }); 
    circle.attr("r", function(d) { return d.r * k; }); 
    } 
}); 

d3.select(self.frameElement).style("height", diameter + "px"); 

</script> 

正如你所看到的，我取代從D3的原代碼JS線：

d3.json("flare.json", function(error, root) { 
    if (error) throw error; 

有：

var myjson = {{ jsonDict|tojson }}; 
    root = JSON.parse(myjson); 

    d3.json("root", function(error, root) { 

正如我有我的代碼現在，如果我檢查該頁面時，svg顯示出來的在正確的位置的網頁，但它是空白。

我是D3和Javascript的新手。任何幫助將非常感激！謝謝！

編輯 - 控制檯日誌

，如果我做的console.log（myjson），控制檯將輸出JSON字符串正確（見下文）

，如果我做的console.log（根），該控制檯打印

Object {children: Array[2], name: "flare"} 
children:Array[2] 
name:"flare" 
__proto__:Object 
__defineSetter__: __defineSetter__() 
__lookupGetter__:__lookupGetter__() 
__lookupSetter__:__lookupSetter__() 
constructor:Object() 
hasOwnProperty:hasOwnProperty() 
isPrototypeOf:isPrototypeOf() 
propertyIsEnumerable:propertyIsEnumerable() 
toLocaleString:toLocaleString() 
toString:toString() 
valueOf:valueOf() 
get __proto__:__proto__() 
set __proto__:__proto__() 

因此，似乎JSON.parse方法讓我失望。

編輯 - 我認爲這個問題可以在console.log(root)可以看出 - 正在從Python的傳入var myjson

{"name": "flare", "children": [{"name": "concept0", "children": [{"name": "intermediate host", "size": 700}, {"name": "abstrusus brevior", "size": 700}, {"name": "stage larva", "size": 700}, {"name": "anterior extremity", "size": 700}, {"name": "crenosoma vulpi", "size": 700}]}, {"name": "concept1", "children": [{"name": "infected cat", "size": 700}, {"name": "abstrusus infection", "size": 700}, {"name": "domestic cat", "size": 700}, {"name": "feline aelurostrongylosis", "size": 700}, {"name": "cat infect", "size": 700}]}]} 

pagesource爲console.log(myjson)

{"name": "flare", "children": [{"name": "concept0", "children": [{"size": 700, "name": "intermediate host"}, {"size": 700, "name": "abstrusus brevior"}, {"size": 700, "name": "stage larva"}, {"size": 700, "name": "anterior extremity"}, {"size": 700, "name": "crenosoma vulpi"}]}, {"name": "concept1", "children": [{"size": 700, "name": "infected cat"}, {"size": 700, "name": "abstrusus infection"}, {"size": 700, "name": "domestic cat"}, {"size": 700, "name": "feline aelurostrongylosis"}, {"size": 700, "name": "cat infect"}]}]} 

編輯我的JSON字符串。我檢查了其他D3可視化和日誌通常應該是這樣的：

Object {name: "flare", children: Array[5]} 
children: Array[5] 
depth:0 
name:"flare" 
r:470 
value:21000 
x:470 
y:470 
__proto__:Object 

Answer 1

因爲你已經通過您的應用程序燒瓶通過你的JSON到您的客戶端，就沒有必要使用D3的d3.json()方法。 d3.json()本質上是一個ajaxGET請求，它從服務器請求文件。

d3.json(url[, callback])

Creates a request for the JSON file at the specified url with the mime type "application/json". If a callback is specified, the request is immediately issued with the GET method, and the callback will be invoked asynchronously when the file is loaded or the request fails; the callback is invoked with two arguments: the error, if any, and the parsed JSON. The parsed JSON is undefined if an error occurs. If no callback is specified, the returned request can be issued using xhr.get or similar, and handled using xhr.on.

您已將您的數據存儲在JavaScript中的變量中，因此無需從服務器請求它。
另外，當你試圖請求它時，你傳遞了一個無效的URL。
刪除d3.json()函數，只運行其餘的代碼應該工作。