d3.json - 如何用对象/动态数据替换 URL？

Question

d3 新手。创建桑基图。找到一个使用外部 .json 文件的示例。该示例使用 d3.v3。我知道那很旧，但我有一棵树也使用该版本，所以我宁愿只加载一个 d3 版本。 sankey 工作正常，但我想用从数据库中提取的动态数据替换静态 json will。我将加载页面，查询数据库，检索数据，并将其格式化为对象数组，并将数组传递给 sankey 代码。

从一些小的更改开始，我复制了 json 文件的内容并将其插入到我的页面中。

var MYDATA = {
"links": [
{"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},
{"source":"Agriculture","target":"Agriculture Soils","value":"5.2"},
{"source":"Agriculture","target":"Livestock and Manure","value":"5.4"},
{"source":"Agriculture","target":"Other Agriculture","value":"1.7"},
...
};

相关的 sankey 代码 - 文件加载的位置 - 是

d3.json("#APP_FILES#sankeygreenhouse.json", function(error, graph) {
    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
    graph.links = graph.links.map(function(x) {
      return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        value: x.value
      };
    });

我正在尝试更改此设置以使用 MYDATA 而不是“#APP_FILES#sankeygreenhouse.json” 我尝试将这条线更改为

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

但这只会给出 404 错误。我怎样才能做到这一点？

Answer 1

d3.json 加载一个文件并将其放入一个对象中（在上面的情况下，

graph

）。通过在对象中声明它，您将跳过该步骤，并将其放入

MYDATA

中。您可以直接将

graph

分配给我的数据，如下所示：

改变：

d3.json(MYDATA, function(error, graph) {
    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
    graph.links = graph.links.map(function(x) {
      return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        value: x.value
      };
    });
//...
})

到

var nodeMap = {};
var graph = MYDATA;
// or if you want to make a copy:
// var graph = JSON.parse(JSON.stringify(MYDATA));

graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
graph.links = graph.links.map(function(x) {
   return {
    source: nodeMap[x.source],
    target: nodeMap[x.target],
    value: x.value
   };
});