在D3插件sankey.js和html代碼之間定義源代碼

Question

我正在嘗試創建一個Sankey圖，雖然我現在能夠加載我的源代碼，但我遇到了一個小問題 sankey.js ，和我的HTML代碼。

當我運行的HTML代碼，我得到一個錯誤信息是這樣的： 遺漏的類型錯誤：無法調用未定義

方法「推」這是錯誤鏈接指向我：

// 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 === "name") source = link.source = nodes[link.source];  
    if (typeof target === "name") target = link.target = nodes[link.target];  
    source.sourceLinks.push(link);  
    target.targetLinks.push(link);  
    }); 
} 

這是HTML代碼中的輸入（我的數據來自csv文件）。

//set up graph in same style as original example but empty 
graph = {"nodes" : [], "links" : []}; 

data.forEach(function (d) { 
    graph.nodes.push({ "name": d.source }); 
    graph.nodes.push({ "name": d.target }); 
    graph.links.push({ 
    "source": d.source, 
    "target": d.target, 
    "value": +d.value 
    }); 
}); 

我的問題是：是依靠，我的數據是從JSON文件的假設sankey.js？。如果是這樣，我該如何調整它以便與csv文件兼容？該數據被保存爲下列csv文件：

source,target,value 
Barry,Elvis,2 
Frodo,Elvis,2 
Frodo,Sarah,2 
Barry,Alice,2 
Elvis,Sarah,2 
Elvis,Alice,2 
Sarah,Alice,4 

Answer 1

您需要使用無論是在nodes在.source和鏈接的.target現在的對象或指數爲nodes。看起來你正在使用來自CSV的字符串，這將以你觀察到的方式打破。

要修復，保留到要創建的對象的引用，並使用這些中的鏈接：

data.forEach(function (d) { 
     var source = { "name": d.source }, 
      target = { "name": d.target }; 
     graph.nodes.push(source); 
     graph.nodes.push(target); 
     graph.links.push({ "source": source, 
         "target": target, 
         "value": +d.value }); 
    });