Javascript &引用；硬的；d3，js力有向图中节点的过滤

我有一个力有向图，有（大量）的节点和它们之间的许多链接。我希望以交互方式应用过滤器，以便只保留节点的子集（以及它们之间的任何链接）。但是，由于图形较大，我希望从模拟中删除筛选出的所有节点，而不是仅隐藏它们（以便生成的图形具有更好的性能）。因此，我希望创建一个过滤后的节点列表作为新阵列，并仅使用这些节点重新初始化模拟。同样的情况也适用于边-我还没有这样做，但我可能需要通过编程确定保留哪些边，并在使用新节点和边重新初始化图形之前执行相同的过滤。我希望保留原始节点/边阵列，以允许“重置”回起始状态

我把一个简单的例子放在一起，在这一点上只是做一些硬编码过滤，但我正在努力使用过滤阵列重新初始化模拟。它似乎正在从模拟中删除过滤节点（圆圈“三”不再可拖动），但仍显示在渲染图中

不过，到目前为止，我尝试的“重置”逻辑似乎确实有效

我做错了什么？有没有更好的方法来实现这一点？（d3.jsv3）

我的示例代码如下所示：

var链接=[{
资料来源：0，
目标：1，
类型：“c”
},
{
资料来源：1，
目标：2，
类型：“d”
},
{
资料来源：2，
目标：0，
类型：“d”
}
];
变量节点=[{
名称：“一”，
类型：“a”
},
{
姓名：“两个”，
类型：“a”
},
{
姓名:"三",，
类型：“b”
}
];
var宽度=300；
var高度=300；
var-force=d3.layout.force（）
.节点（节点）
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（200）
。收费（-400）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（“图形”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
功能颜色（n）{
var colors=[“#3366cc”、“#dc3912”、“#ff9900”、“#109618”、“#990099”、“#0099c6”、“#dd4477”、“#66aa00”、“#b82e2e”、“#316395”，
“#994499”、“#22aa99”、“#aaaa11”、“#6633cc”、“#e67300”、“#8b0707”、“#651067”、“#329262”、“#5574a6”、“#3b3eac”
];
返回颜色[n%颜色.长度]；
}
var path=svg.append（“g”）.selectAll（“path”）
.data（force.links（））
.enter（）.append（“行”）
.attr（'class'，'link'）
.attr（'stroke'，函数（d，i）{
返回颜色（i）；
})
var circles=svg.append（“g”）；
变量圆圈=圆圈。选择全部（“圆圈”）
.data（force.nodes（））
.enter（）.append（“圆”）
.attr（“r”，8）
.attr（'class'，'circle'）
.attr（'fill'，函数（d，i）{
返回颜色（i+3）；
})
.呼叫（强制拖动）；
var text=svg.append（“g”）.selectAll（“text”）
.data（force.nodes（））
.enter（）.append（“文本”）
.attr（“x”，14）
.attr（“y”，“.31em”）
.文本（功能（d）{
返回d.name；
});
函数tick（）{
path.attr({
x1：功能（d）{
返回d.source.x；
},
y1：功能（d）{
返回d.source.y；
},
x2：功能（d）{
返回d.target.x；
},
y2：功能（d）{
返回d.target.y；
}
});
circle.attr（“transform”，transform）；
attr（“transform”，transform）；
}
函数变换（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
}
var nodeText=“”；
功能节点（node）{
返回（node.type==“a”）；
}
函数linkTypeC（link）{
返回（link.type==“c”）；
}
函数applyFilter（）{
force.nodes（nodes.filter（nodeTypeA））；
强制链接（链接过滤器（链接类型C））；
circle.data（force.nodes（））；
text.data（force.nodes（））；
data（force.links（））；
d3.选择全部（“圆圈”）。每个(
职能（d）{
console.log（d.name）；
}
);
控制台日志（“”）；
}
函数resetFilter（）{
力节点（节点）；
强制链接（links）；
circle.data（force.nodes（））；
text.data（force.nodes（））；
data（force.links（））；
d3.选择全部（“圆圈”）。每个(
职能（d）{
console.log（d.name）；
}
)
控制台日志（“”）；
}

#按钮{
位置：绝对位置；
顶部：10px；
左：20px；
高度：100px；
宽度：400px；
z指数：99；
}
#图表{
位置：绝对位置；
顶部：50px；
左：20px；
高度：300px；
宽度：300px；
z指数：98；
}

申请
重置

对于筛选和重置功能，您可以更新选择的数据，但不使用输入或退出选择来添加/删除新元素

在最初附加元素时，确实会使用enter选择，例如：

var path = svg.append("g").selectAll("path")
 .data(force.links())
 .enter().append("line")
 ...

但在更新时，您只需使用：

path.data(force.links());

您仍然需要指定要添加的内容以及添加方式，就像最初添加节点时所做的那样

要退出节点非常简单，我们只需在应用过滤器时将

.exit（）.remove（）

添加到上面的行中

.exit（）

选择所选内容中数据数组中不再具有相应项的元素

.remove（）

只需将它们从DOM中删除：

var链接=[
{源：0，目标：1，键入：“c”}，
{源：1，目标：2，键入：“d”}，
{源：2，目标：0，键入：“d”}
];
变量节点=[
{name:“one”，键入：“a”}，
{name:“two”，键入：“a”}，
{名称：“三”，类型：“b”}
];
var宽度=300；
var高度=300；
var-force=d3.layout.force（）
.节点（节点）
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（200）
。收费（-400）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（“图形”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
功能颜色（n）{
var colors=[“#3366cc”、“#dc3912”、“#ff9900”、“#109618”、“#990099”、“#0099c6”、“#dd4477”、“#66aa00”、“#b82e2e”、“#316395”，
“#994499”、“#22aa99”、“#aaaa11”、“#6633cc”、“#e67300”、“#8b0707”、“#651067”、“#329262”、“#5574a6”、“#3b3eac”]；
返回颜色[n%颜色.长度]；
}
var path=svg.append（“g”）。选择All