将 json 文件加载到 d3.js答案

【问题标题】：loading json file to d3.js将 json 文件加载到 d3.js
【发布时间】：2012-09-19 06:38:12
【问题描述】：

我已将 d3 的 force.js 用于可视化目的。

以下是完整js的sn-p：

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

test.json 文件当前与 js 文件位于同一位置。它工作正常。这些文件位于我的网络应用程序的“页面”文件夹中。如果我使用 http url "http://localhost:8084/FMS/faces/pages/test.json" 代替 "test.json" 它工作正常。但是如果我使用“/Users/subashbasnet/test.json”，即文件的路径代替“test.json”，它就不起作用了。

如果我将 json 输出设置为 var 并使用它来代替“test.json”，它就不起作用。例如：

 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 文件有以下输出：

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

我想如何在 <pre> 标签中加载 json 来代替 "test.json" 。

非常期待任何一个问题的解决方案。提前致谢。

【问题讨论】：

标签： javascript json jsp d3.js

【解决方案1】：

如果您在 JSP 中生成数据，那么您可以简单地使用它

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

直接生成 JS 对象而不是 JSON 字符串

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

那你就不用d3的json解析器了，直接做

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

【讨论】：

@SubashBasnet 如果此答案解决了您的问题，请考虑通过单击左侧的绿色对勾标记接受。如果人们看到您会接受有用的答案，他们会更愿意回答您未来的问题。

【解决方案2】：

使用单引号来引用你的 json 字符串

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

或转义双引号

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

你的jsp文件只需要输出json字符串

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

【讨论】：