在sankey d3 javascript文件中嵌入json

时间:2015-02-03 15:42:32

标签: javascript json svg d3.js sankey-diagram

我使用csv文件填充sankey图时遇到CORS问题,所以我想用嵌入式json替换它以进行测试。我已经重新格式化了csv数据以使其成为d3 sankey插件所需的格式,但是我无法弄清楚如何让javascript读取json输入来代替csv。

我用来加载csv的代码如下:



/ load the data with d3.csv
d3.csv("testinput.csv", function(error, data) {

	graph = {"nodes" : [], "links" : []};

  data.forEach(function (d, i) {
    var item = { source: d.source, target: d.target, values: [] };
    for (var j=0; j < 101; j++) {
      item.values.push(d['value'+j.toString()]);
    }
    portfolioValues.push(item);
    graph.nodes.push({ "name": d.source });
    graph.nodes.push({ "name": d.target });
    graph.links.push({
        source: portfolioValues[i].source,
        target: portfolioValues[i].target,
        value: portfolioValues[i].values[startingAllocation]
    });
  });

  //this handy little function returns only the distinct / unique nodes
  graph.nodes = d3.keys(d3.nest()
           .key(function (d) { return d.name; })
           .map(graph.nodes));

  //it appears d3 with force layout wants a numeric source and target
  //so loop through each link replacing the text with its index from node
  graph.links.forEach(function (d, i) {
      graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
      graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
      portfolioValues[i].source = graph.links[i].source;
      portfolioValues[i].target = graph.links[i].target;
  });

  //now loop through each nodes to make nodes an array of objects rather than an array of strings
  graph.nodes.forEach(function (d, i) {
      graph.nodes[i] = { "name": d };
  });
&#13;
&#13;
&#13;

我想使用的json是:

&#13;
&#13;
{
"nodes": [
{"node":1,"name":"AA"},
{"node":2,"name":"BB"},
{"node":3,"name":"XX"},
{"node":4,"name":"YY"}
],
"links": [
{"target":3,"source":1,"value":300},
{"target":4,"source":2,"value":0},
{"target":3,"source":2,"value":0},
{"target":4,"source":2,"value":200}
]}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

HereSankey diagram

的jsfiddle

enter image description here

json完全嵌入在javascript中,并封装在函数getData()。