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, который, как я подозреваю, получает и используется в функции update(). В вашем втором примере вы определили root, поэтому он указывает на функцию загрузки json, тогда как является указателем на загруженный объект json. Переименуйте root как jsonFunc и установите root = graph; в функции загрузки json во втором примере, посмотрите, работает ли это. Если нет, это время jsfiddle.