score:1

Accepted answer

the problem is that you are drawing the new graph over the old graph.

that is the reason why you get the impression that its adding child to the old parent.

so the correct approach would be to

  1. draw the graph
  2. remove all nodes that is not required.

so 1st point

 var nodedata = svg.selectall(".node")
    .data(nodes, function(d){ /* function which return the unique id of each node */ return d.name;})

    //make all the nodes.
    nodedata.enter().append('g')
            .attr("class", "node")
            .append('rect')
            .attr("width", 50)
            .attr("height", 40)
            .attr("fill", "tan")
            .attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y + 50; })
            .on("click", function(d,i){
             clickoutside(d);
            });

2nd point

remove all nodes which are intersection of first set of passed data and the second set of passed data.

nodedata.exit().remove();

last point add children to parent

you can change the json

var dataone = {
  "name": "mike and marcia",
  "children": [
    {
      "name": "children",
      "children": [
        { "name": "mikael" }
      ]
    }
  ]
};

add whatever structure json and pass it down your drawtree function

working code here


Related Query

More Query from same tag