D3中的Sankey圖

Question

我想從bl.ocks.org（ http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13 ）運行一個sankey圖的示例，但是當我使用

python -m SimpleHTTPServer 8888 &

從下面一行中的index.html，sankey.js和sankey-formatted.json文件夾中

source.sourceLinks.push(link);

給出一個錯誤：

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

此代碼來自的功能是：

  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);
});

而我的json文件是：

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

Answer 1

  // 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
  }
]}

柱塞示例