d3.js圖表​​代碼創建額外的節點

Question

我有一個完美的工作圖與一些動態過濾器。唯一的問題是這些額外的節點出現在圖形周圍。

所有圖形的鏈接是按照JSON數據：

var IDData = JSON.stringify([ 
    ["C2", "ID2", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 2], 
    ["C2", "C3", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 2], 
    ["C6", "C1", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 1], 
    ["C5", "ID4", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 2], 
    ["C1", "ID1", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 1], 
    ["C1", "P1", "Customer", "Phone", "2015-1-1", "2015-1-1", 500.0, 1], 
    ["C6", "P2", "Customer", "Phone", "2015-1-1", "2015-1-1", 500.0, 2], 
    ["C2", "C6", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 1], 
    ["C4", "C3", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 3], 
    ["C1", "C2", "Customer", "Customer", '2015-1-1', "2015-1-1", 500.0, 1], 
    ["C4", "ID3", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 3], 
    ["C3", "ID3", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 3], 
    ["C1", "C5", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 1] 
]); 

下面是用於迭代通過它以使其在一個格式用於使代碼圖形。

var galData = JSON.parse(IDData); 
var startnodes = []; 
var endnodes = []; 
var startnodetype = []; 
var endnodetype = []; 
var SendTime = []; 
var PayTime = []; 
var Total_Amt = []; 
var Depth = []; 
galData.map(function(e, i) { 
    startnodes.push(e[0]); 
    endnodes.push(e[1]); 
    startnodetype.push(e[2]); 
    endnodetype.push(e[3]); 
    SendTime.push(e[4]); 
    PayTime.push(e[5]); 
    Total_Amt.push(e[6]); 
    Depth.push(e[7]); 
}); 
var final_data = createNodes(startnodes, endnodes, startnodetype, endnodetype, SendTime,PayTime, Total_Amt, Depth); 
makeGraph("#Network_graph", final_data); 

下面是創建節點功能：

 function createNodes(startnodes, endnodes, startnodetype, endnodetype,SendTime, PayTime,Total_Amt,Depth) { 
    var node_set = new Set(); 
    var links = []; 
    var nodetype = d3.set(); 
    startnodes.forEach(function(src, i) { 
    var tgt = endnodes[i]; 
    node_set.add({ 
     id: src, 
     type: startnodetype[i] 
    }); 
    node_set.add({ 
     id: tgt, 
     type: endnodetype[i] 
    }); 
    links.push({ 
     source: src, 
     target: tgt, 
     sendtime: SendTime[i], 
     paytime: PayTime[i], 
     total_amt: Total_Amt[i], 
     depth: Depth[i], 
     value: 1 
    }); 
    }); 

    startnodetype.forEach(function(src, i) { 
    var tgt_type = endnodetype[i]; 
    nodetype.add(src); 
    nodetype.add(tgt_type); 
    }); 

    var d3GraphData = { 
    nodes: [...node_set.values()].map(function(d) { 
     return { 
     id: d.id, 
     type: d.type, 
     group: 1 
     } 
    }), 
    links: links, 
    nodetype: nodetype.values().map(function(d) { 
     return { 
     id: d.id, 
     group: 1 
     } 
    }) 
    } 
    return d3GraphData; 

}; 

我有一種感覺，這是因爲使用的：

var node_set = new Set() 

但我不知道。對節點使用d3.set（）並不呈現圖形。

此外，我覺得node_set正在正確填充。不知道爲什麼額外的節點只是隨機出現。

以下是Jsfiddle。

Answer 1

問題是因爲您使用set來創建獨特的元素數組。

但在此之前使用設置你必須明白：

var mySet = new Set(); 

mySet.add(1); 
mySet.add(5); 
mySet.add(5); 

will generate [1,5]//as expected 

但是當你做

var mySet = new Set(); 

mySet.add({id:1});//Line 1 
mySet.add({id:5});//Line 2 
mySet.add({id:1});//Line 3 

will generate [{id:1}, {id:5}, {id:1}]//as not expected 

原因是添加了1號線和線對象3是兩個不同的對象，這是什麼原因爲什麼你會得到意外的節點（但是你期望第三個對象不應該被添加，因爲第一個對象的id爲1）

修復它的一種方法是使用數組。

var node_set = []; 

在將元素添加到數組之前，檢查它是否存在使用id。

if (!node_set.find(function(d){ return d.id == src})){ 
     //only add if any object with that id is not found 
     node_set.push({ 
      id: src, 
      type: startnodetype[i] 
     }); 
    } 

工作代碼here