Sankey Diagramm in d3

Question

Ich möchte das Beispiel eines Sankey-Diagramm von bl.ocks.org (http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13) laufen, aber wenn ich es mit

python -m SimpleHTTPServer 8888 & 

aus dem Ordner mit index.html laufen, sankey.js und Sankey-formatted.json in der folgenden Zeile

source.sourceLinks.push(link); 

Gibt einen Fehler:

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

die Funktion dieser Code stammt von:

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

und meine JSON-Datei ist:

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

Ich glaube, Sie etwas in Ihrer Datenstruktur fehlen. Versuchen Sie es erneut mit diesen umgestalteten Daten. Nämlich der node Index, dies wird für die Links benötigt, um eingerichtet zu werden.

{ 
"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