Javascript D3动态网络实时添加节点时速度较慢

当我实时传输节点和链接时，我正在努力找出我的速度慢的原因

在codepen中，我通过使用

links1

和

nodes1

数组模拟了实时内容。 我使用

forEach

添加节点和链接，并分别调用

add_prc

和

add_conn

，这会在内部调用

refresh

以显示新添加的节点或链接

---

请单击重置按钮以开始模拟。

小更改以修复大问题

这是一个屏幕截图，它将清楚地解释添加节点和链接的速度减慢（这只是通过最初的重置点击，想象一下当节点数量增加时，它将实时添加的节点数量）：

要解决此问题，您必须更改节点输入选择（现在不正确）。以下是新节点输入选择：

node = node.data(nodes);

var nodeEnter = node.enter().insert("g").attr("class", "node")
   .call(force.drag);

nodeEnter
 .append("image")
 ...

nodeEnter
 .append('text')
 ...

注意区别，我并不是在每次通话中都附加

图像

和

文本

下面是代码片段：

#nodeConsole{
宽度：80%；
高度：1px；
字体系列：信使新；
填充：1px；
边框：3倍纯色灰色；
页边顶部：1px；
溢出：自动；
}
#连接节点{
宽度：80%；
字体系列：信使新；
填充：10px；
}
#SRC节点{
宽度：40%；
字体系列：信使新；
填充：8px；
}
#目标节点{
宽度：40%；
字体系列：信使新；
填充：8px；
}
直肠{
填充：无；
指针事件：全部；
}
.节点{
填写：#000；
}
.光标{
填充：无；
笔画：棕色；
指针事件：无；
}
.链接{
行程：#999；
}
.节点文本{
指针事件：无；
字体：10px无衬线；
}
路径链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}

刷新
重置
var links1=[{“源”：“ctfa”，“目标”：“tfa”}，
{“来源”：“cea”，“目标”：“tea”}，
{“源”：“ctfe”，“目标”：“tfe”}，
{“源”：“ctee”，“目标”：“tee”}，
{“源”：“ctfu”，“目标”：“tfu”}，
{“来源”：“cteu”，“目标”：“teu”}，
{“源”：“rfa”，“目标”：“tfa”}，
{“来源”：“rea”，“目标”：“tea”}，
{“源”：“rfe”，“目标”：“tfe”}，
{“源”：“ree”，“目标”：“tee”}，
{“源”：“rfu”，“目标”：“tfu”}，
{“来源”：“reu”，“目标”：“teu”}，
{“源”：“r1fa”，“目标”：“rfa”}，
{“来源”：“r1fa”，“目标”：“gfa”}，
{“源”：“r1fa”，“目标”：“ggf”}，
{“源”：“r1ea”，“目标”：“rea”}，
{“源”：“r1ea”，“目标”：“gea”}，
{“源”：“r1ea”，“目标”：“gge”}，
{“源”：“r1fe”，“目标”：“rfe”}，
{“源”：“r1fe”，“目标”：“gfe”}，
{“源”：“r1fe”，“目标”：“ggf”}，
{“源”：“r1ee”，“目标”：“ree”}，
{“源”：“r1ee”，“目标”：“gee”}，
{“源”：“r1ee”，“目标”：“gge”}，
{“源”：“r1fu”，“目标”：“rfu”}，
{“来源”：“r1fu”，“目标”：“gfu”}，
{“源”：“r1fu”，“目标”：“ggf”}，
{“来源”：“r1eu”，“目标”：“reu”}，
{“来源”：“r1eu”，“目标”：“geu”}，
{“来源”：“r1eu”，“目标”：“gge”}，
{“源”：“hh1fa”，“目标”：“ggf”}，
{“来源”：“hh1ea”，“目标”：“gge”}，
{“源”：“hh1fe”，“目标”：“ggf”}，
{“源”：“hh1ee”，“目标”：“gge”}，
{“源”：“hh1fu”，“目标”：“ggf”}，
{“源”：“hh1eu”，“目标”：“gge”}，
{“源”：“dbfa”，“目标”：“gfa”}，
{“源”：“dbea”，“目标”：“gea”}，
{“源”：“dbfe”，“目标”：“gfe”}，
{“source”：“dbee”，“target”：“gee”}，
{“来源”：“dbfu”，“目标”：“gfu”}，
{“源”：“dbeu”，“目标”：“geu”}，
{“源”：“hflse”，“目标”：“tee”}，
{“来源”：“纽约商品交易所”，“目标”：“teu”}，
{“来源”：“hfnse”，“目标”：“teu”}，
{“源”：“hfret”，“目标”：“tfu”}，
{“源”：“hfebs”，“目标”：“tfe”}，
{“源”：“hfint”，“目标”：“tfu”}，
{“源”：“c1e”，“目标”：“ctee”}，
{“源”：“c1e”，“目标”：“gge”}，
{“源”：“c2e”，“目标”：“ctee”}，
{“源”：“c3e”，“目标”：“cteu”}，
{“源”：“c4e”，“目标”：“cteu”}，
{“源”：“c5e”，“目标”：“ggf”}，
{“源”：“d1e”，“目标”：“ctee”}，
{“源”：“c1f”，“目标”：“ctfe”}，
{“源”：“c2f”，“目标”：“ctfe”}，
{“源”：“c3f”，“目标”：“ggf”}，
{“源”：“c4f”，“目标”：“gge”}，
{“源”：“c5f”，“目标”：“ctfa”}，
{“源”：“d1f”，“目标”：“ctfe”}]；
变量nodes1=[{“id”：“tfa”}，
{“id”：“tea”}，
{“id”：“tfe”}，
{“id”：“tee”}，
{“id”：“tfu”}，
{“id”：“teu”}，
{“id”：“ctfa”}，
{“id”：“cea”}，
{“id”：“ctfe”}，
{“id”：“ctee”}，
{“id”：“ctfu”}，
{“id”：“cteu”}，
{“id”：“rfa”}，
{“id”：“rea”}，
{“id”：“rfe”}，
{“id”：“ree”}，
{“id”：“rfu”}，
{“id”：“reu”}，
{“id”：“r1fa”}，
{“id”：“r1ea”}，
{“id”：“r1fe”}，
{“id”：“r1ee”}，
{“id”：“r1fu”}，
{“id”：“r1eu”}，
{“id”：“hh1fa”}，
{“id”：“hh1ea”}，
{“id”：“hh1fe”}，
{“id”：“hh1ee”}，
{“id”：“hh1fu”}，
{“id”：“hh1eu”}，
{“id”：“dbfa”}，
{“id”：“dbea”}，
{“id”：“dbfe”}，
{“id”：“dbee”}，
{“id”：“dbfu”}，
{“id”：“dbeu”}，
{“id”：“gfa”}，
{“id”：“gea”}，
{“id”：“gfe”}，
{“id”：“gee”}，
{“id”：“gfu”}，
{“id”：“geu”}，
{“id”：“gge”}，
{“id”：“ggf”}，
{“id”：“hflse”}，
{“id”：“hfnyse”}，
{“id”：“hfnse”}，
{“id”：“hfret”}，
{“id”：“hfebs”}，
{“id”：“hfint”}，
{“id”：“c1e”}，
{“id”：“c2e”}，
{“id”：“c3e”}，
{“id”：“c4e”}，
{“id”：“c5e”}，
{“id”：“d1e”}，
{“id”：“c1f”}，
{“id”：“c2f”}，
{“id”：“c3f”}，
{“id”：“c4f”}，
{“id”：“c5f”}，
{“id”：“d1f”}]；
//刷新（）；
函数重置（）{
节点1.forEach（函数（d）{add_prc（d）}）；
links1.forEach（函数（d）{add_con（d）}）；
}
功能添加\u prc（新节点）{
//console.log（newNode）；
addNodeCanvas（newNode.id，newNode.grp）；
}
功能添加（新建连接）{
//console.log（newConnection）；
addLinkCanvas（newConnection.source，newConnection.target）；
}
//设置间隔（刷新，15000）；
函数addNodeCanvas（nodeName，g）{
var节点={x:900，y:900，id:nodeName，grp:g}；
var n=节点。推送（节点）；
//console.log（节点）；
刷新（）；
}
函数addLinkCanvas（idSrc、idTarget）{
如果（idSrc！=idTarget）{
var s={}，t={}；
forEach（函数（curNode）{
if（typeof curNode.id！=“未定义”）{
如果（curNode.id==idSrc）{s=curNode；}
如果（curNode.id==idT