Javascript D3.data（）处的新数据使svg重新绘制，而不是更新节点位置

考虑到这一点，数据更新会使svg更新，而无需重新绘制。相关的原始代码部分，其行为如下所述：

// DATA JOIN
link = link.data(firstLinks ? graph.links1 : graph.links2);

// DATA JOIN
node = node.data(graph.nodes);

simulation.force("link")
    .links(firstLinks ? graph.links1 : graph.links2);

var new_graph_http_data = fetchNewData(); // unreferenced new data copy from graph

// DATA JOIN
link = link.data(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);

// DATA JOIN
node = node.data(new_graph_http_data.nodes);

simulation.force("link")
    .links(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);

但是，如果节点和链接数据引用是新的，即使内容相同，svg也会在每次更新时重新绘制。 相关的已更改代码部分使其表现为：

// DATA JOIN
link = link.data(firstLinks ? graph.links1 : graph.links2);

// DATA JOIN
node = node.data(graph.nodes);

simulation.force("link")
    .links(firstLinks ? graph.links1 : graph.links2);

var new_graph_http_data = fetchNewData(); // unreferenced new data copy from graph

// DATA JOIN
link = link.data(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);

// DATA JOIN
node = node.data(new_graph_http_data.nodes);

simulation.force("link")
    .links(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);

，在函数update（）中，调用update_local（）将使图形按预期工作。调用update_http（）将使图形重新绘制

//本地工作与获取（克隆）
函数更新（）{
/*原始工作版本*/
//更新_local（）；
/*重新绘制版本*/
更新_http（）；
};
更新（）

/*样式定义*/
钮扣{
位置：绝对位置；
顶部：1米；
左：1米；
}
.节点{
笔画：白色；
笔画宽度：2px；
}
.链接{
笔画：灰色；
笔画宽度：2px；
}
交换链路
//图形数据存储
//原始blocks-data.json的一部分
变量图={
“节点”：[
{“id”：“0”，“组”：“1”}，
{“id”：“1”，“组”：“2”}，
{“id”：“2”，“group”：“2”}，
{“id”：“3”，“group”：“2”}，
{“id”：“4”，“group”：“2”}，
{“id”：“5”，“group”：“3”}，
{“id”：“6”，“group”：“3”}，
{“id”：“7”，“group”：“3”}，
{“id”：“8”，“组”：“3”}
],
“链接1”：[
{“源”：“0”，“目标”：“1”}，
{“源”：“0”，“目标”：“2”}，
{“源”：“0”，“目标”：“3”}，
{“源”：“0”，“目标”：“4”}，
{“源”：“1”，“目标”：“5”}，
{“源”：“2”，“目标”：“6”}，
{“源”：“3”，“目标”：“7”}，
{“源”：“4”，“目标”：“8”}，
{“源”：“1”，“目标”：“8”}，
{“源”：“2”，“目标”：“5”}，
{“源”：“3”，“目标”：“6”}，
{“源”：“4”，“目标”：“7”}
],
“链接2”：[
{“源”：“0”，“目标”：“5”}，
{“源”：“0”，“目标”：“6”}，
{“源”：“0”，“目标”：“7”}，
{“源”：“0”，“目标”：“8”}，
{“源”：“5”，“目标”：“6”}，
{“源”：“5”，“目标”：“8”}，
{“源”：“7”，“目标”：“6”}，
{“源”：“7”，“目标”：“8”}，
{“源”：“1”，“目标”：“5”}，
{“源”：“2”，“目标”：“6”}，
{“源”：“3”，“目标”：“7”}，
{“源”：“4”，“目标”：“8”}
]
};
//当前链接集的状态变量
var firstLinks=true；
//svg和大小调整
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
//d3配色方案
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
//用于数据联接的元素
var link=svg.append（“g”）.selectAll（“link”），
node=svg.append（“g”）.selectAll（“node”）；
//模拟初始化
var simulation=d3.forceSimulation（）
.force（“链接”，d3.forceLink（）
.id（函数（d）{return d.id；}））
.force（“冲锋”，d3.forceManyBody（）
.strength（函数（d）{return-500；}））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
//按钮事件处理
d3.选择（“#开关btn”）。打开（“单击”，功能（）{
firstLinks=！firstLinks；
更新（）；
});
//遵循v4通用更新模式
函数更新_local（）{
//基于当前状态更新链接集
//数据连接
link=link.data（firstLinks？graph.links1:graph.links2）；
//出口
//删除旧链接
link.exit（）.remove（）；
//进入
//根据需要创建新链接。
link=link.enter（）.append（“行”）
.attr（“类”、“链接”）
.合并（链接）；
//数据连接
node=node.data（graph.nodes）；
//出口
node.exit（）.remove（）；
//进入
node=node.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，10）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.开启（“结束”，绘图）
)
.合并（节点）；
//为模拟设置节点、链接和alpha目标
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（firstLinks？graph.links1:graph.links2）；
alphaTarget（0.3）.restart（）；
}
//遵循v4通用更新模式
函数更新_http（）{
var new_graph_http_data=fetchNewData（）；
//基于当前状态更新链接集
//数据连接
link=link.data（firstLinks？new_graph_http_data.links1：new_graph_http_data.links2）；
//出口
//删除旧链接
link.exit（）.remove（）；
//进入
//根据需要创建新链接。
link=link.enter（）.append（“行”）
.attr（“类”、“链接”）
.合并（链接）；
//数据连接
node=node.data（新的\u图\u http\u数据.nodes）；
//出口
node.exit（）.remove（）；
//进入
node=node.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，10）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.开启（“结束”，绘图）
)
.合并（节点）；
//为模拟设置节点、链接和alpha目标
模拟
.nodes（新的\u图形\u http\u数据.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（firstLinks？新建图表\u http\u数据.links1：新建图表\u http\u数据.links2）；
alphaTarget（0.3）.restart（）；
}
//拖动事件处理程序
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}
//勾选事件处理程序（绑定到容器的节点）
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）