D3部队布置图文件加载数据

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对象，我怀疑json对象将在update()函数中得到并使用。在第二个示例中，定义了root，因此它指向json加载函数，而graph是指向加载的json对象的指针。在第二个示例中，将root重命名为jsonFunc，并在json加载函数中设置root = graph;，看看这是否有效。如果不是的话，那就太麻烦了。