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行目にオブジェクトを追加さ​​れ、これが理由で、2つの異なるオブジェクトされていますなぜ予期しないノードがあるのですか？（ただし、第1オブジェクトのIDが1であるため、第3オブジェクトが追加されないことを期待しています）

これを修正する方法の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