D3.js 防止D3在更新时添加重复项

D3.js 防止D3在更新时添加重复项,d3.js,graph,collapse,force-layout,D3.js,Graph,Collapse,Force Layout,下面是一个“工作”的D3动画 子节点在鼠标单击时成功消失。。。但是,会添加重复的节点(“圆”)。如果您运行以下代码,然后折叠和打开节点,您将看到节点出现在其他节点的顶部 在镀铬检查中也可以看到圆形元素的重复 我们要做的就是简单的折叠和打开。非常感谢你的帮助!谢谢。 (忽略节点标签-它们不重要) .节点{ 光标:指针; 字体系列:“HelveticaNeue灯”,“Helvetica Neue灯”,“Helvetica Neue”,Helvetica,Arial,“Lucida Grande”

下面是一个“工作”的D3动画

子节点在鼠标单击时成功消失。。。但是,会添加重复的节点(“圆”)。如果您运行以下代码,然后折叠和打开节点,您将看到节点出现在其他节点的顶部

在镀铬检查中也可以看到圆形元素的重复

我们要做的就是简单的折叠和打开。非常感谢你的帮助!谢谢。

(忽略节点标签-它们不重要)


.节点{
光标:指针;
字体系列:“HelveticaNeue灯”,“Helvetica Neue灯”,“Helvetica Neue”,Helvetica,Arial,“Lucida Grande”,无衬线;
字体大小:300;
}
.node.text{
填充物:白色;
}
.ORG.circle{
填充:1d3649;
}
.EMR.圆圈{
填充:#B2D0F5;
行程:5596e6;
笔划阵列:3px,3px;
不透明度:.5;
}
.EMR.圆圈:悬停{
填充:#5596e6;
}
.链接{
填充:无;
冲程:#eee;
笔划宽度:1.5px;
字体:10px无衬线;
}
.link.active{
行程:#ddd;
笔画宽度:2;
}
.阿罗{
填充:#666;
}
.arrow.active{
笔划宽度:0!重要;
}
变量数据集={
“节点”:[{
“id”:223,
“类型”:“父级”,
“财产”:{
}
}, {
“id”:136525,
“类型”:“子项”,
“财产”:{
“病人”:“6090”,
“批次”:“70”
}
}, {
“id”:146525,
“类型”:“子项”,
“财产”:{
“病人”:“6090”,
“批次”:“70”
}
}, {
“id”:156525,
“类型”:“子项”,
“财产”:{
“病人”:“6090”,
“批次”:“70”
}
}, {
“id”:166525,
“类型”:“子项”,
“财产”:{
“病人”:“6090”,
“批次”:“70”
}
}, {
“id”:176525,
“类型”:“子项”,
“财产”:{
“病人”:“6090”,
“批次”:“70”
}
}, {
“id”:136448,
“类型”:“子项”,
“财产”:{
“病人”:“6094”,
“批次”:“70”
}
}, {
“id”:136328,
“类型”:“子项”,
“财产”:{
“病人”:“6082”,
“批次”:“70”
}
}, {
“id”:136305,
“类型”:“子项”,
“财产”:{
“病人”:“6096”,
“批次”:“70”
}
}, {
“id”:136303,
“类型”:“子项”,
“财产”:{
“病人”:“6093”,
“批次”:“70”
}
}, {
“id”:136299,
“类型”:“子项”,
“财产”:{
“病人”:“6091”,
“批次”:“70”
}
}, {
“id”:136261,
“类型”:“子项”,
“财产”:{
“病人”:“6089”,
“批次”:“70”
}
}, {
“id”:136212,
“类型”:“子项”,
“财产”:{
“病人”:“6087”,
“批次”:“70”
}
}, {
“id”:136115,
“类型”:“子项”,
“财产”:{
“病人”:“6078”,
“批次”:“70”
}
}, {
“id”:136113,
“类型”:“子项”,
“财产”:{
“病人”:“6088”,
“批次”:“70”
}
}, {
“id”:135843,
“类型”:“子项”,
“财产”:{
“病人”:“6072”,
“批次”:“70”
}
}, {
“id”:555,
“类型”:“孙子”,
“财产”:{
}
}],
“边缘”:[{
“id”:0,
“from”:136113,
“至”:555,
“财产”:{
}
},{
“id”:0,
“from”:136525,
“至”:555,
“财产”:{
}
},{
“id”:0,
“from”:146525,
“至”:555,
“财产”:{
}
},{
“id”:0,
“from”:156525,
“至”:555,
“财产”:{
}
},{
“id”:0,
“from”:166525,
“至”:136448,
“财产”:{
}
},{
“id”:0,
“from”:176525,
“至”:223,
“财产”:{
}
},{
“id”:0,
“from”:223,
“至”:136525,
“财产”:{
}
}, {
“id”:0,
“from”:223,
“至”:136448,
“财产”:{
}
}, {
“id”:0,
“from”:223,
“至”:136328,
“财产”:{
}
}, {
“id”:0,
“from”:223,
“至”:136305,
“财产”:{
}
}, {
“id”:0,
“from”:136525,
“至”:136303,
“财产”:{
}
}, {
“id”:0,
“from”:223,
“至”:136299,
“财产”:{
}
}, {
“id”:0,
“from”:223,
“至”:136261,
“财产”:{
}
}, {
“id”:0,
“from”:223,
“至”:136212,
node.enter().append("g")...

node.append("circle")...

node.append("text")...
var nodeEnter = node.enter().append("g")...

nodeEnter.append("circle")...

nodeEnter.append("text")...