加载json文件到d3.js [英] loading json file to d3.js
问题描述
我已经使用d3的force.js作为可视化目的。
I've used the force.js of d3 for visualization purpose.
以下是完整js的代码片段：
Following is the snippet of full js:
d3.json("test.json", function(json) {
force.nodes(json.nodes)
.links(json.links)
.start();
});
test.json文件当前位置与js文件位置相同。它工作正常。
这些文件在我的web应用程序的'pages'文件夹中。如果我使用http urlhttp：// localhost：8084 / FMS / faces / pages / test.json代替test.json，它工作正常。
但是如果我使用/Users/subashbasnet/test.json，即文件的路径代替test.json，它不工作。
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.
如果我将json输出设置为var并使用代替test.json，它不工作。
例如：
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();
});
我的.jsp文件有以下输出：
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>
我如何将json加载到< pre> / code>标记代替test.json。
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.
推荐答案
如果你在JSP中生成数据，那么你可以简单地
If you're generating the data in your JSP then you could simply have it do
<script>var theData = (<%= unquotedJsonData %>);</script>
直接生成JS对象，而不是JSON字符串
which produces a JS object directly rather than a JSON string
<script>var theData = ({"nodes":[...]});</script>
然后你不需要使用d3的json解析器，只要做
Then you don't need to use d3's json parser, just do
force.nodes(theData.nodes)....
这篇关于加载json文件到d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
