CODEWITHSUNDEEP
javascriptjsond3.js
2pourdrummer
2pourdrummer

Reputation: 45

D3 Force Layout Graph load data from file

I took this code off the web and it works correctly. I need to load the data from a json instead of the data being coded into the page. Being new to this, I decide to first simply take the original data and put it in a json file and call the file. I can't seem to get it to work. I get a blank section where the graph would go and all I get from debugger is "mutating the prototype of an object will cause you code to run slowly", which I get with the original code so that's not it.

Here is the section of the original code

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;
}
}

I swapped the data for this

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;
}); 
}
}

And created a data2.json file:

{
"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"}]}
]
}

Note, no brackets, so it's not a true json but it doesn't work with the brackets either. Again, no error, just a white space where the graph should be. Thanks for the help in advance.

Upvotes: 0

Views: 147

Answers (1)

mgraham
mgraham

Reputation: 6207

root is a variable in the original which points to the json object, which I suspect gets picked up and used in the update() function. In your 2nd example, you've defined root so it points to the json loading function, whereas graph is the pointer to the loaded json object. Rename root as jsonFunc and set root = graph; within the json loading function in your 2nd example, see if that works. If not, it's make a jsfiddle time.

Upvotes: 1

Related Questions