loading json file to d3.js

Question

I've used the force.js of d3 for visualization purpose.

Following is the snippet of full js:

d3.json("test.json", function(json) {
  force.nodes(json.nodes)
      .links(json.links)
      .start();
});

The test.json file is currently in same location as that of the js file. It works fine. The files are within the 'pages' folder of my web-application. If I use the http url "http://localhost:8084/FMS/faces/pages/test.json" in place of "test.json" it works fine. But if I use "/Users/subashbasnet/test.json" i.e. the path of the file in place of "test.json" it doesnot work.

If I set json output to var and use in place of "test.json" it doesnot work. Eg:

 var myjson = "{"nodes":[{"name":"MYriel","group":1},{"name":"Labarre","group":2}],"links":[{"source":1,"target":0,"value":1}]}";
    d3.json(myjson, function(json) {
      force.nodes(json.nodes)
          .links(json.links)
          .start();
    });

My .jsp file has following output:

<html>
<head></head>
<body>
<pre>{"nodes":[{"name":"MYriel","group":1},{"name":"Labarre","group":2}],"links":[{"source":1,"target":0,"value":1}]}</pre>
</body>
</html>

How am I suppose to load the json within the <pre> tag in place of "test.json" .

Solution to either of the problem is very much awaited. Thanks in advance.

Ian Roberts · Accepted Answer · 2012-09-19 07:07:32Z

2

If you're generating the data in your JSP then you could simply have it do

<script>var theData = (<%= unquotedJsonData %>);</script>

which produces a JS object directly rather than a JSON string

<script>var theData = ({"nodes":[...]});</script>

Then you don't need to use d3's json parser, just do

force.nodes(theData.nodes)....

edited Sep 19, 2012 at 7:07

answered Sep 19, 2012 at 6:50

Ian Roberts

123k17 gold badges177 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ian Roberts Over a year ago

@SubashBasnet If this answer solved your problem, please consider accepting it by clicking the green tick mark to the left. People will be more willing to answer your future questions if they see that you will accept helpful answers.

Musa · Accepted Answer · 2012-09-19 06:48:39Z

0

use single quotes to quote your json string

var myjson = '{"nodes":[{"name":"MYriel","group":1},{"name":"Labarre","group":2}],"links":[{"source":1,"target":0,"value":1}]}';

or escape the double quotes

var myjson = "{\"nodes\":[{\"name\":\"MYriel\",\"group\":1},{\"name\":\"Labarre\",\"group\":2}],\"links\":[{\"source\":1,\"target\":0,\"value\":1}]}";

Your jsp file needs to output only the json string

{"nodes":[{"name":"MYriel","group":1},{"name":"Labarre","group":2}],"links":[{"source":1,"target":0,"value":1}]}

answered Sep 19, 2012 at 6:48

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Collectives™ on Stack Overflow

loading json file to d3.js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related