D3 Force佈局圖文件加載數據

Question

我將這段代碼從網絡中刪除，它可以正常工作。我需要從json加載數據，而不是編碼到頁面中的數據。作爲新手，我決定首先將原始數據放入json文件中並調用該文件。我似乎無法得到它的工作。我得到了一個空白部分，圖中將出現，我從調試器獲得的所有內容都是「改變對象的原型，這會導致代碼運行緩慢」，這是我用原始代碼得到的，所以不是這樣。

這裏是原代碼

function loadImage(){ 
if(LoadData){ 
root = { 
"name": "Daniel Vinod", "imageURL":"images/root.png","id":"1", 
"children": [ 
{"name": "Abraham Aaron", "imageURL":"images/user1.png","id":"2", 
"children":[{"name": "Joseph Titus", "imageURL":"images/user3.png","id":"3"}, 
       {"name": "Herold Enoch", "imageURL":"images/user4.png","id":"4"}]}, 

{"name": "Samuel Goliatf", "imageURL":"images/user7.png","id":"5", 
"children":[{"name": "Enoch Titus", "imageURL":"images/user2.png","id":"6"}, 
      {"name": "Quintus Titus", "imageURL":"images/user5.png","id":"7"}]}, 

{"name": "Absalom Dauid", "imageURL":"images/user2.png","id":"8" , 
"children":[{"name": "Abraham Shalom", "imageURL":"images/user4.png","id":"9"}, 
      {"name": "Elisha Titus", "imageURL":"images/user6.png","id":"10"}]}, 

{"name": "Daniel Goliatf", "imageURL":"images/user3.png","id":"12", 
"children":[{"name": "Quintus Titus", "imageURL":"images/user5.png","id":"13"}, 
      {"name": "Enoch Titus", "imageURL":"images/user1.png","id":"14"}, 
      {"name": "Elisha Titus", "imageURL":"images/user6.png","id":"15", 
      "children":[ {"name": "Enoch Absalom", "imageURL":"images/user1.png","id":"11"}]}]}, 

{"name": "Enoch Shalom", "imageURL":"images/user5.png","id":"16", 
"children":[{"name": "Absalom Joseph", "imageURL":"images/user7.png","id":"17"}, 
      {"name": "Shalom Joseph", "imageURL":"images/user4.png","id":"18"}, 
     {"name": "Quintus Titus", "imageURL":"images/user5.png","id":"7"}]} 
] 
}; 

force = d3.layout.force() 
.on("tick", tick) 
.size([w, h]); 

vis = d3.select("#chart").append("svg:svg") 
.attr("width", w) 
.attr("height", h); 
    update(); 
LoadData = false; 
} 
} 

我交換數據這個

function loadImage(){ 
    if(LoadData){ 
root = d3.json("data2.json", function(error, graph) { 
if (error) throw error; 

    force = d3.layout.force() 
.on("tick", tick) 
.size([w, h]); 

vis = d3.select("#chart").append("svg:svg") 
.attr("width", w) 
.attr("height", h); 
    update(); 
LoadData = false; 
}); 
} 
} 

並開創了data2.json文件的部分：

{ 
"name": "Daniel Vinod", "imageURL":"images/root.png","id":"1", 
"children": [ 
    {"name": "Abraham Aaron", "imageURL":"images/user1.png","id":"2", 
    "children":[{"name": "Joseph Titus", "imageURL":"images/user3.png","id":"3"}, 
      {"name": "Herold Enoch", "imageURL":"images/user4.png","id":"4"}]}, 

    {"name": "Samuel Goliatf", "imageURL":"images/user7.png","id":"5", 
    "children":[{"name": "Enoch Titus", "imageURL":"images/user2.png","id":"6"}, 
      {"name": "Quintus Titus", "imageURL":"images/user5.png","id":"7"}]}, 

    {"name": "Absalom Dauid", "imageURL":"images/user2.png","id":"8" , 
    "children":[{"name": "Abraham Shalom", "imageURL":"images/user4.png","id":"9"}, 
      {"name": "Elisha Titus", "imageURL":"images/user6.png","id":"10"}]}, 

    {"name": "Daniel Goliatf", "imageURL":"images/user3.png","id":"12", 
    "children":[{"name": "Quintus Titus", "imageURL":"images/user5.png","id":"13"}, 
      {"name": "Enoch Titus", "imageURL":"images/user1.png","id":"14"}, 
      {"name": "Elisha Titus", "imageURL":"images/user6.png","id":"15", 
      "children":[ {"name": "Enoch Absalom", "imageURL":"images/user1.png","id":"11"}]}]}, 

    {"name": "Enoch Shalom", "imageURL":"images/user5.png","id":"16", 
    "children":[{"name": "Absalom Joseph", "imageURL":"images/user7.png","id":"17"}, 
      {"name": "Shalom Joseph", "imageURL":"images/user4.png","id":"18"}, 
      {"name": "Quintus Titus", "imageURL":"images/user5.png","id":"7"}]} 
] 
} 

注意，沒有括號，所以它不是一個真正的JSON，但它不支持括號。再次，沒有錯誤，只是圖形應該在的空白處。我在這裏先向您的幫助表示感謝。

Answer 1

root是指向json對象的原始變量，我懷疑這個變量會被拾取並在update()函數中使用。在你的第二個例子中，你已經定義了root，所以它指向了json加載函數，而是指向加載的json對象的指針。在第二個例子中將root重命名爲jsonFunc並在json加載函數中設置root = graph;，看看是否有效。如果沒有，這是一個無憂無慮的時間。