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加载函数，而graph是指向加载的json对象的指针。将root重命名为jsonFunc并在第二个示例中的json loading函数中设置root = graph;，看看是否有效。如果没有，那就是jsfiddle时间。

D3 Force Layout Graph从文件加载数据

1 个答案: