Javascript .attr（“x”，8） .attr（“y”，“.31em”） .attr（“类”、“阴影”） .text（函数（d）{返回d.name；}）； text.append（“svg:text”） .attr（“x”，8） .attr（“y”，“.31em”） .attr（“类”、“写”） .text（函数（d）{返回d.name；}）； //jQuery更新下拉列表中的部件。 $（文档）.ready（函数（）{ $（'.BU'）。在（'change'，function（）上{ curBU=$（'.BU'）.val（）； //警报（'所选BU为'+curBU'）； //过滤链接并基于此重新生成节点。 minLinks={}； minLinks=links.filter（函数（d）{ if（（d.type==curBU）| |（d.typeKBP==curBU））{ 返回d } }) //新节点 节点2={}； nodes2=force.nodes（）.filter（函数（d）{return d3.keys（minLinks.filter（函数（e）{return e.source.name==d.name | | e.target.name==d.name；}））.length>0}）； //minLinks.forEach（函数（d）{ //d.source=nodes2[d.source]| |（nodes2[d.source]={name:d.source，type:d.type}）； //d.target=nodes2[d.target]| |（nodes2[d.target]={name:d.target，type:d.typeKBP}）； // }); 力 .节点（节点2） .links（minLinks） .start（）； //圈。删除（）； newCirc=circle.data（force.nodes（））； newCirc.enter（）.append（“svg:circle”） .attr（“r”，6） .attr（“类”，函数（d）{返回d.type；}） .呼叫（强制拖动）； newCirc.exit（）.remove（）； newPath=path.data（force.links（））； 新路径 .enter（）.append（“svg:path”） .attr（“类”，函数（d）{return“link”+d.type；}） .attr（“marker end”，函数（d）{return”url（#“+d.type+”）；}）； newPath.exit（）.remove（）； newText=text.data（force.nodes（））； newText.exit（）.remove（）； newText.select（“.shadow”）.text（函数（d）{return d.name；}）； newText.select（“.write”）.text（函数（d）{return d.name；}）； }); }); //使用椭圆弧路径段对方向性进行双重编码。 函数tick（）{ attr（“d”，函数（d）{ 变量dx=d.target.x-d.source.x， dy=d.target.y-d.source.y， dr=Math.sqrt（（dx*dx）/2+（dy*dy））； 返回“M”+d.source.x+”、“+d.source.y+”A“+dr+”、“+dr+”0,1“+d.target.x+”、“+d.target.y”； }); 圆属性（“变换”，函数（d）{ 返回“translate”（“+d.x+”，“+d.y+”）； }); text.attr（“转换”，函数（d）{ 返回“translate”（“+d.x+”，“+d.y+”）； }); }

在更新代码中，在使用新数据进行数据绑定之前，应重新选择现有节点。在当前代码中，您正在使用变量

circle

和

path

，它们实际上是指

enter

选择中新添加的节点

在每次数据联接之前重新选择是确保使用DOM中最新的实际状态联接的最佳方法：

svg.selectAll("path")
    .data(force.links());

svg.selectAll("circle")
    .data(force.nodes());

以某种方式对圆和路径进行分类可能是个好主意，这样可以更直接地为它们进行选择，这样就不会意外地在svg中拾取其他路径或圆

另外，在操作“输入”选项和“更新”选项时要小心。考虑到您并没有为数据联接定义键，这意味着默认情况下将使用索引，从而使用新数据更新现有节点，这一点尤其正确。例如，在代码中，您仅在新添加的节点上设置

class

属性，您可能希望在所有节点上更新该属性

---

本教程是更好地理解这一点的良好起点：。

@RowanC:发现您的代码非常有用。你能分享一下最新的吗。

svg.selectAll("path")
    .data(force.links());

svg.selectAll("circle")
    .data(force.nodes());