Delete/Change labels in Force Directed Graph

Question

I have this code for updating my force directed graph, which I will call every time I delete nodes and links from the respectives arrays:

function update_graph() {

link_update = svg.selectAll(".link").data(
        force.links(),
        function (d) {
            return d.source.id + "-" + d.target.id;
        }
);

link_update.enter()
        .insert("line", ".node")
        .attr("class", "link");

link_update.exit()
        .remove();

node_update = svg.selectAll(".node").data(
        force.nodes(),
        function (d) {
            return d.id;
        }
);

node_update.enter()
        .append("circle")
        .attr("class", function (d) {
            return "node " + d.id;
        })
        .attr("r", function (d) {
            return radio / d.group;
        })
        .call(force.drag)
        .on('dblclick', connectedNodes);


//labels
node_update.enter().append("text")
 .attr("dx", function (d) {
 return (radio-7)/d.group;
 })
 .attr("dy", function (d) {
 return (radio-7)/d.group;
 })
 .text(function (d) {
 return d.id;
 })
 .style("stroke", "black");


// Remove the SVG circle whenever a node vanishes from the node list.
node_update.exit()
        .remove();

// Start calling the tick() method repeatedly to lay out the graph.
force.start();

}

The nodes and links are correctly deleted from the graph, but the labels remain there, how can I have the labels in sync with the nodes and show only what is currently on the graph?

Fiddle replicating the problem: https://jsfiddle.net/vzes4h8y/

Thanks in advance

Here is a fiddle replicating the problem, click a few times in "Add Node" and then in "Reset Graph" jsfiddle.net/vzes4h8y — RCRH89

Gerardo Furtado Gerardo Furtado · Accepted Answer · 2016-05-08T14:18:40

You can create a different variable for the text

node_updateText = svg.selectAll(".text").data(
        force.nodes(),
        function (d) {
            return d.id;
        }
).enter();

And removing them accordingly.

Here is the fiddle: https://jsfiddle.net/LmqLtr8e/

Delete/Change labels in Force Directed Graph

1 Answers