d3.js-选择强制布局组不更新节点

下面的示例应在选择底部的组后更新节点。但是select工作正常，svg上的节点没有更新

force_json（）
函数force_json（）{
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，200）。attr（'height'，100）
.style（'border'，'1px实心红色'），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var jsonobj={
“节点”：[
{“id”：“Myriel”，“group”：1}，
{“id”：“拿破仑”，“集团”：2}，
{“id”：“Mlle.Baptistine”，“group”：3}，
{“id”：“Mme.Magloire”，“group”：1}，
],
“链接”：[
{“来源”：“拿破仑”，“目标”：“米里哀”，“价值”：10}，
{“source”：“Mlle.Baptistine”，“target”：“Myriel”，“value”：8}，
{“source”：“Mme.Magloire”，“target”：“Myriel”，“value”：10}，
]
}
//json（“miserables.json”），函数（错误，图形）{
//如果（错误）抛出错误；
// });
过程数据（jsonobj）
函数过程_数据（图形）{
var currNodes=graph.nodes
var currLinks=graph.links
var nodesByGroup=d3.group（graph.nodes，d=>d.group）
var catMenu=d3.选择（“主体”）.追加（“div”）
猫菜单
.append（“选择”）
.selectAll（“选项”）
.数据（NodeByGroup）
.输入（）
.附加（“期权”）
.attr（“值”，函数（d，i）{
返回d[0]；
})
.文本（功能（d，i）{
返回d[0]；
})
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（链接）
.enter（）.append（“行”）
.attr（'stroke'，'#aaa'）
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（当前节点）
.enter（）.append（“圆”）
.attr（“r”，5）
.attr（'pointer-events'，'all'）
.attr（'stroke'，'none'）
.attr（'stroke-wdith'，40）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
node.append（“标题”）
.text（函数（d）{返回d.id；}）；
node.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.id；}）
模拟
.节点（当前节点）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
节点
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
catMenu.on（'change'，function（）{
var selectedGroup=+d3。选择（此）
.选择（“选择”）
.财产（“价值”）；
currNodes=filterNodes（selectedGroup）；
});
函数过滤器节点（组）{
var filteredNodes=nodesByGroup.get（组）
返回过滤器节点；
}
}
函数dragstarted（事件，d）{
如果（！event.active）simulation.alphaTarget（0.3）.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（事件，d）{
d、 fx=事件x；
d、 fy=事件y；
}
函数Draged（事件，d）{
如果（！event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}
}

---

在选择组时重新呈现过滤后的节点和链接：

force_json（）
函数force_json（）{
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，200）。attr（'height'，200）
.style（'border'，'1px实心红色'），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var jsonobj={
“节点”：[
{“id”：“Myriel”，“group”：1}，
{“id”：“拿破仑”，“集团”：2}，
{“id”：“Mlle.Baptistine”，“group”：3}，
{“id”：“Mme.Magloire”，“group”：1}，
{“id”：“A”，“group”：2}，
{“id”：“B”，“group”：3}，
{“id”：“C”，“group”：3}
],
“链接”：[
{“来源”：“拿破仑”，“目标”：“米里哀”，“价值”：10}，
{“来源”：“拿破仑”，“目标”：“A”，“价值”：10}，
{“source”：“Mlle.Baptistine”，“target”：“Myriel”，“value”：8}，
{“source”：“Mlle.Baptistine”，“target”：“B”，“value”：8}，
{“source”：“Mme.Magloire”，“target”：“Myriel”，“value”：10}，
{“源”：“A”，“目标”：“B”，“值”：10}，
{“源”：“C”，“目标”：“B”，“值”：10}，
]
}
过程数据（jsonobj）
函数过程_数据（图形）{
var nodesByGroup=d3.group（graph.nodes，d=>d.group）
var catMenu=d3.选择（“主体”）.追加（“div”）
猫菜单
.append（“选择”）
.selectAll（“选项”）
.数据（NodeByGroup）
.输入（）
.附加（“期权”）
.attr（“值”，函数（d，i）{
返回d[0]；
})
.文本（功能（d，i）{
返回d[0]；
})
catMenu.select（'select'）。append（'option'）。text（'all'）。attr（“selected”，“selected”）；
const updateGraph=（节点、链接）=>{
常量模拟=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
svg.selectAll（'g'）.remove（）；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（链接）
.enter（）.append（“行”）
.attr（'stroke'，'#aaa'）
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“r”，5）
.attr（'pointer-events'，'all'）
.attr（'stroke'，'none'）
.attr（'stroke-wdith'，40）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）