0

I am trying to make my own tree in D3.js, but I am having trouble figuring out how to make one. I have looked at the following links:

http://bl.ocks.org/1249394#interactive_tree.css
d3js Tree square

and even tried copying them to get something working so that I can tinker, but it won't work for me. I have riddled the code with alerts and in both the pedigree and the collapsible tree the code stops working right after the d3.json call. I copied the json files too and renamed them so that they were the same. In the pedigree example 

d3.json("info.json", function(json) {
  alert(json);
  var nodes = tree.nodes(json); 
  alert('hi');

So here the first alert works and the second doesn't, and this happens in both examples. If anybody knows why, an explanation or fix would be greatly appreciated. Thanks!!!

I figured out that when d3.json("localhost...", callback) is called it is returning null. I read on another post that there are cross domain restrictions. I am not really sure what that means or how to fix it

I have tried it both locally from the same directory as I am running my application from and I have tried it from my Xamp server. And still when the alert(json) is called it shows null.

Community
  • 1
  • 1
Tom
  • 91
  • 4
  • 15

1 Answers1

1

The d3 documentation has some more information on this. Basically, your browser will not load a JSON file from the local filesystem or a server that the original page is not on. There are ways around this, for example Google Chrome can be started with --disable-web-security to disable those restrictions, but this is not recommended.

All modern browsers have a Javascript error console that will show you the exact reason for the JSON file not loading. Remember that when you serve the page through a local web server, you shouldn't specify localhost:// or similar in the path of the JSON file, just the path relative to the directory that the HTML file resides in.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204