在d3中的Sankey图

时间:2017-06-16 14:10:13

标签: javascript json d3.js sankey-diagram

我想从bl.ocks.org(http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13)运行一个sankey图的例子,但当我用

运行它时
(sumA-sumB)/2
来自index.html,sankey.js和sankey-formatted.json的文件夹中的

python -m SimpleHTTPServer 8888 &

给出错误:

source.sourceLinks.push(link);

此代码的功能是:

sankey.js:91TypeError: undefined is not an object (evaluating 'source.sourceLinks.push')

我的json文件是:

  links.forEach(function(link) {
  var source = link.source,
      target = link.target;
  if (typeof source === "number") source = link.source = nodes[link.source];
  if (typeof target === "number") target = link.target = nodes[link.target];
  source.sourceLinks.push(link);
  target.targetLinks.push(link);
});

1 个答案:

答案 0 :(得分:0)

  // Populate the sourceLinks and targetLinks for each node.
  // Also, if the source and target are not objects, assume they are indices.
  function computeNodeLinks() {
    nodes.forEach(function(node) {
      node.sourceLinks = [];
      node.targetLinks = [];
    });
    links.forEach(function(link) {
      var source = link.source,
          target = link.target;
      if (typeof source === "number") source = link.source = nodes[link.source];
      if (typeof target === "number") target = link.target = nodes[link.target];
      source.sourceLinks.push(link);
      target.targetLinks.push(link);
    });
  }

我认为您遗漏了数据结构中的某些内容。使用此重新构建的数据再次尝试。即node索引,这是设置链接所必需的。

{
"nodes": [
  {
    "node" : 0,
    "name": "Africa"
  }, 
  {
    "node" :1,
    "name": "America"
  }, 
  {
    "node" :2,
    "name": "Europe"
  }
],
"links":[
  {
    "source": 0, 
    "target": 2, 
    "value": 1
  }, 
  {
    "source": 1, 
    "target": 2, 
    "value": 2
  }, 
  {
    "source": 0, 
    "target": 1, 
    "value": 1
  }
]}

Plunker Example