CODEWITHSUNDEEP
javascriptjsond3.jstreemap
user2573216
user2573216

Reputation: 63

Unable to load Json file in d3.js

I am developing the solution using d3.js library when we click on Circle It should be Zoomed and data needs to be shown inside circle.

As a first step i was trying to Load the data from Json file.

Below are the contents of json file and i am using Visual Studio 2012 .

mydata.json

[{"name":"Ravi","age":25},{"name":"aman","age":29}]

Both .html file and .json file are in same folder, still i am getting error.

Line: 5734 Error: Unable to get value of the property 'children': object is null or undefined

Below is the Script:

    var canvas = d3.select("body").append("svg")
                 .attr("width", 500)
                  .attr("height", 500);

    d3.json("mydata.json", function (data) {
        var treemap = d3.layout.treemap()
        .size([500, 500])
        .nodes(data)
        console.log(treemap);

    });

</script>

Note: i was just trying to load file and using layout treemap.

Thanks

Upvotes: 0

Views: 1794

Answers (1)

Adam Pearce
Adam Pearce

Reputation: 9293

To get a better idea of what is going on, either use debugger; + a dev console or add more logging:

d3.json("mydata.json", function (error, data) {
  console.log(error);
  console.log(data);
    var treemap = d3.layout.treemap()
      .size([500, 500])
      .nodes(data)
    console.log(treemap);
});

Hosting the files with python -m SimpleHTTPServer and navigating to 127.0.0.1:8000 logs the following on my computer:

null
[{"name":"Ravi","age":25},{"name":"aman","age":29}] 
[[{"name":"Ravi","age":25},{"name":"aman","age":29}]]

which makes me think that you aren't accessing the files through a server; I would try doing that.

Upvotes: 1

Related Questions