D3.js v5-从另一个节点数组更新节点

Question

我得到的每个节点都在g html标记中，该标记包含另外2个标记：

文本标记-表示节点的名称。

圆形标签-节点形状。

当我从HTML中的一组节点转移到另一组节点时，我同时看到了旧节点集和新节点集的文本标签和圆形标签。

我尝试使用exit（）。remove（）方法和merge（）方法，但似乎无法解决我的问题

这是我的更新功能的一部分，与节点有关。

    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();

    });

我希望获得仅带有新节点的圆和文本的g html标签。