Can't remove Child element of node in D3.js Force-Directed Graph

Question

I am using D3.js Force-Directed Graph like this Demo here. I have modified this code for instance, change circle with SVG image and label and link with SVG path.Clicking on node it's expand and collapse child node,means is add and remove child nodes on node's mouse click.

After adding the new nodes then all existing nodes also recreate image and label and the old node still exists, but I would like to to update only new one not affect existing node.

Same issue with remove node it is supposed to replace the old node with new node, not append new element to node not effect other existing nodes, only change added or removed node.

function update() {
    var nodes = flatten(root),
        links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force.nodes(nodes)
        .links(links)
        .linkDistance(120)
        .charge(-500)
        .start();

    path = vis.selectAll("path.link");
    path = path.data(force.links());
    path.enter().append("svg:path")
        .attr("class", "link")
        .attr("marker-end", "url(#end)");

    path.exit().remove();
    node = vis.selectAll(".node");
    node = node.data(force.nodes());
    node.enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .call(force.drag);

    node.append("image")
        .attr("xlink:href", function (d) {
        return "http://t2.gstatic.com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX";
    })
        .attr("class", "image")
        .attr("x", -15)
        .attr("y", -15)
        .attr("width", 24)
        .attr("height", 24);

    node.append("text")
        .attr("class", "text")
        .attr("x", 40)
        .attr("dy", ".35em")
        .style("fill", color)
        .text(function (d) {
        return d.name;
    });

    node.exit().remove();
}

I have created a fiddle with my code here.

here i get it how to remove old nodes and links vis.selectAll(".node").remove(); and vis.selectAll("path.link").remove(); that remove old path and nodes but that draw path over the node so make svg very bad on update now can anyone hele me to how can i update links only because removing node is works fine but when i try to remove paths that's add new path after creating node.. :( — Amit Rana

Amit Rana Amit Rana · Accepted Answer · 2013-05-28T08:32:10

needs to remove node not the div inside it , simply add two line before force.start()

vis.selectAll("path").remove();
vis.selectAll(".node").remove();

updated version of fiddle

Can't remove Child element of node in D3.js Force-Directed Graph

1 Answers