D3.js v3中如何用对象/动态数据替换d3.json的URL参数

我是D3.js新手，正在制作桑基图（sankey diagram）。找到一个使用外部.json文件的示例，该示例基于d3.v3版本。我知道这个版本较旧，但因现有树形图也使用该版本，所以希望只加载一个D3版本。目前桑基图运行正常，但我想将静态JSON文件替换为从数据库获取的动态数据：加载页面后查询数据库，获取数据并格式化为对象数组，再将该数组传入桑基图代码。

我先做了小改动，将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"},
...
};

原本加载文件的相关桑基图代码为：

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错误，请问如何解决该问题？

出现404是因为d3.json()的第一个参数要求是URL字符串，你传入本地对象MYDATA时，它会把这个对象强制转为字符串去请求对应的资源地址，自然找不到资源报错。

1. 使用本地已定义的MYDATA数据 #

直接跳过d3.json的异步请求逻辑，把MYDATA当作graph数据直接处理：

// 直接使用本地定义的MYDATA
var graph = MYDATA;
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
  };
});
// 继续执行后续的桑基图渲染代码...

2. 从数据库动态获取数据 #

如果需要从后端数据库获取数据，用d3.json请求后端提供数据的接口URL即可：

// 替换为你的后端接口地址
d3.json("/api/your-sankey-data-endpoint", function(error, graph) {
  if (error) throw error; // 处理请求错误
  // 同样执行节点映射和链接转换逻辑
  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
    };
  });
  // 后续桑基图渲染代码...
});

3. 手动组装动态数据 #

如果是通过其他方式（比如表单交互、其他接口返回）组装好符合格式的数据对象，同样直接把该对象当作graph来处理，不需要调用d3.json。

内容的提问来源于stack exchange，提问作者user1009073