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;，看看是否有效。如果没有，这是一个无忧无虑的时间。