1

Each node I got is in g html tag which contains 2 more tags:

Text tag- representing the name of the node.

Circle tag - which is the node shape.

When I shifting from 1 set of nodes to another set of nodes in the HTML I see both text tags and circle tags of data from the old set of nodes and from the new set of node.

I tried to play with the exit().remove() method and with merge() method but nothing seems to fix my problem

Here is part of my update function which relevant to the nodes.

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

    });

I expect to get g html tag with only the circle and text of new node.

4

0 回答 0