maintaining the layering of elements after adding new elements

Question

I'm drawing a little clickable graph data browser.

Example: First, I load a few movies, and I see this:

Then, after I click on one of the nodes ( Hellraiser , in this case), I use ajax to load additional related information properties and values, and end up with this:

The lines and circles of the newly added nodes are obviously drawn after the originally clicked node was.

Here is the draw method that gets called every time new data is ready to be added to the graph:

function draw() {

    force.start();

    //Create edges as lines
    var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 2)
            .on("mouseover", lineMouseover)
            .on("mouseout", lineMouseout);

    //create the nodes
    var node = svg.selectAll(".node")
            .data(dataset.nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .on("click", callback)
            .attr("r", function(d, i) { //custom sizes based on datatype
                if(d.datatype && (d.datatype in _design) ) {
                    return _design[d.datatype].size;
                } else {
                    return _design["other"].size;
                }
            })
            .call(force.drag);

    //create fancy outlines on the nodes
    node.append("circle")
            .attr("r", function(d,i) { //custom sizes based on datatype
                if(d.datatype && (d.datatype in _design) ) {
                    return _design[d.datatype].size * r;
                } else {
                    return _design["other"].size * r;
                }
            })
            .style("stroke", "black")
            .style("stroke-width", 3)
            .style("fill", function(d, i) { //custom color based on datatype
                if(d.datatype && (d.datatype in _design) ) {
                    return _design[d.datatype].color;
                } else {
                    return _design["other"].color;
                }
            })
            .attr("class","circle");

    //Add text to each node.
    node.append("text")
            .attr("dx", 0)
            .attr("dy", ".25em")
            //.attr("class", "outline")
            .attr("fill", "black")
            .text(function(d, i) {
                return d.name;//d.name
            });

};

How do I go about drawing those lines underneath the clicked node?

Answer 1

You can group the different kinds of elements below g elements that you can create at the beginning in the required order. This way, anything you append to them later will be ordered correctly:

var links = svg.append("g"),
    nodes = svg.append("g"),
    labels = svg.append("g");

// ...

var edges = links.selectAll("line")
        .data(dataset.edges)
        .enter()
        .append("line");

var node = nodes.selectAll(".node")
        .data(dataset.nodes)
        .enter()
        .append("g")

// etc.