Сохранение слоев элементов после добавления новых элементов

Question

Я рисую браузер с интерактивным графическим броузером.

Пример: Во-первых, я загружаю несколько фильмов, и я вижу это:

Затем, после того, как я нажимаю на одном из узлов (Hellraiser, в данном случае), я использую Аякса загрузить дополнительные информационные связанные свойства и значения, и в конечном итоге с этим:

линии и круги вновь добавленных узлов, очевидно, обращается после того, как первоначально нажал узел был.

Вот метод рисования, который вызывается каждый раз, когда новые данными готов быть добавлено к графе:

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

}; 

Как я могу идти о рисовании этих строк под щелкнули узел?

Answer 1

Вы можете группировать различные элементы ниже g элементов, которые вы можете создать в начале в требуемом порядке. Таким образом, все, что вы добавляете к ним позже будет заказано правильно:

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.