Код диаграммы 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

Проблема заключается в том, что вы используете набор для создания уникального массива элементов.

Но прежде чем использовать набор вы должны понять:

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 

Причина Объект добавлен в Line1 и линии 3 два разных объекта, это причина, почему вы получаете неожиданные узлы. (Однако вы ожидаете, что третий объект не должен быть добавлен, потому что у 1-го объекта есть id 1)

Один из способов исправить это использование массива.

var node_set = []; 

Перед тем как добавить элемент в массив, проверьте, существует ли он с использованием идентификатора.

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