D3.js use hardcode json to implement treemap wrong(Just COPY the demo code and it failed)

Question

I am new to know D3.js, and I try to use the treemap of it, and I copy the demo code and change the link of outer json file to hardcode, and when I run it, it met a problem. Here is the original demo and tutorial: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap_code.php and the link to the demo is at the bottom of this page.

And here is my code: http://jsfiddle.net/cR35x/2/

To load the hardcode json, I changed this function, please pay attention here:

    var json = [......];
    d3.json(json, function(root) {
    root = json;
    initialize(root);
    accumulate(root);
    layout(root);
    display(root);
    .......

It didn't show the right thing as the demo. Could someone give me any help? Thanks!

Another question, when I run it locally without any server with chrome, just like the url:

file:///C:/Users/Administrator/Downloads/treemap/treemap.html

It shows nothing but a gray square, without any words or links on it. And for chrome, I have already set the tag: allow-file-access-from-files.

Thanks!

Answer 1

That is because my friend, the example you've posted uses d3.v2 whereas in your fiddle you are using d3.v3.

Here's the updated fiddle with working example using d3.v2.

In case you are interested: Implementation of the layout function is different in v2 and v3. And, since you were using v3, the children elements of the json objects were not getting parsed and only the top level children were being rendered.

Also, since the data has been hard-coded within the file, this should now also work when you directly open it in chrome via file:// protocol.

Answer 2

The purpose d3.json(filename, function) is to read a file and do something with the data. The first parameter has to be a filename. If you already have your data loaded as a Javascript object, you don't need to use d3.json. Just do something with the data.