d3.js图形代码创建额外的节点
作者:互联网
我有一个包含许多动态过滤器的完美工作图.唯一的问题是这些多余的节点显示在图形周围.
图的所有链接均符合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.
解决方法:
问题是因为您正在使用set来制作唯一元素数组.
但是在使用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行中添加的对象是两个不同的对象,这就是您获得意外节点的原因.(但是您希望不添加第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
标签:d3-js,graph-visualization,javascript 来源: https://codeday.me/bug/20191026/1936480.html