Javascript D3.js v5-从另一个节点阵列更新节点
我得到的每个节点都是g html标记，其中包含另外两个标记： 文本标记-表示节点的名称 圆形标记-这是节点形状 当我在HTML中从一组节点切换到另一组节点时，我会看到来自旧节点集和新节点集的文本标记和圆圈标记 我尝试使用exit（）.remove（）方法和merge（）方法，但似乎没有任何东西可以解决我的问题 这里是我的更新函数的一部分，它与节点相关Javascript D3.js v5-从另一个节点阵列更新节点,javascript,d3.js,d3-force-directed,Javascript,D3.js,D3 Force Directed,我得到的每个节点都是g html标记，其中包含另外两个标记： 文本标记-表示节点的名称 圆形标记-这是节点形状 当我在HTML中从一组节点切换到另一组节点时，我会看到来自旧节点集和新节点集的文本标记和圆圈标记 我尝试使用exit（）.remove（）方法和merge（）方法，但似乎没有任何东西可以解决我的问题 这里是我的更新函数的一部分，它与节点相关 var node = d3.select('.nodes') .selectAll('g.node'); //he
var node = d3.select('.nodes')
.selectAll('g.node');
//here is my selection between two array of nodes
node = node.data(show_bad_connections ? bad_nodes : nodes)
node.exit().remove();
node_enter = node.enter().append("g")
.attr("class", "node").merge(node);
node_enter.append("text")
.attr("class", "nodetext")
.attr("x", "0em")
.attr("y", 15)
.text(function (d) { return d.name });
node_enter.append("circle")
.style("fill", function (d) {
if (d.id == 0) { return "#0099ff" }
if (d.CF.includes(0)) { return "#00cc00" }
if (d.TSP > 0.5) { return "#ff9900" } else { return "#ff0000" }
})
.attr("r", r);
node_enter.on("mouseover", function (d) {
var g = d3.select(this); // The node
// The class is used to remove the additional text later
var info = g.append('text')
.classed('info', true)
.attr('dx', "0em")
.attr('dy', -10)
.text(function (d) {
if (d.id == 0) { return "id=0" }
else { return "id=" + d.id.toString() + ",TF=" + d.TF.toString() + ",AUA=" + d.AUA.toString() }
})
.style("font-size", "12px");
d3.selectAll('line.link')
.filter(function (l) {
return (d.id != 0 && (d.id == l.source.id || d.id == l.target.id));
})
.style("opacity", 1)
}).on("mouseout", function () {
d3.selectAll('line.link').style("opacity", 0.1)
// Remove the info text on mouse out.
d3.select(this).select('text.info').remove();
});