将 json 代码集成到 d3 html 文件中

Question

我正在测试来自以下 link 的桑迪图表：https://gist.github.com/d3noob/c2637e28b79fb3bfea13

但是我只能在 Firefox 中看到图表，在 Chrome 中看不到。我怀疑是因为 Chrome 不允许从外部文件访问数据。

因此，我尝试集成 json 代码，但是当我尝试时，图表在 Firefox 中不显示

我添加了一个包含所有 json 代码的变量，例如：

var dataset = {"nodes":[{"node":0,"name":"node0"},{"node":1,"name":"node1"},{"node":2,"name":"node2"},{"node":3,"name":"node3"},{"node":4,"name":"node4"}],"links":[{"source":0,"target":2,"value":2},{"source":1,"target":2,"value":2},{"source":1,"target":3,"value":2},{"source":0,"target":4,"value":2},{"source":2,"target":3,"value":2},{"source":2,"target":4,"value":2},{"source":3,"target":4,"value":4}]};

我已经替换了这行代码：

d3.json("sankey-formatted.json", function(error, graph) {

对于这个（只需用数据集变量替换文件名）：

d3.json(dataset, function(error, graph) {

, 但不是图表没有显示。桑基图未显示的任何想法？

谢谢

Answer 1

您面临的问题是 d3.json...

...returns a new request to get the JSON file at the specified url with the default mime type application/json.

也就是说，解决方案比您想象的要简单：因为您已经有了一个包含所有数据的变量，只需将其命名为 graph（您的 d3.json 函数加载文件并填充名为 graph) 的数据数组):

var graph = {"nodes":[{"node":0,"name":"node0"},...

并删除 d3.json 函数，不要忘记删除结束卷曲 bracket/parenthesis:

d3.json("sankey-formatted.json", function(error, graph) {//remove this...

    //your function

});//...and don't fortget to remove this too.

将 json 代码集成到 d3 html 文件中

Integrate json code into a d3 html file

javascript

json

d3.js

sankey-diagram