D3.js Layout Force: Динамически добавлен узел не перемещается с остальной частью графа

Question

Я работаю на построение молекулы создателя в D3, используя оригинальный пример, созданный Майк Босток: http://bl.ocks.org/mbostock/3037015

Я использую как и в примере. Моя проблема заключается в том, что я добавляю новый узел/атом динамически, он не перемещается вместе с остальной частью графика. Я прочитал другие вопросы и внедрил все, что было предложено, и убедился, что я следую правильной процедуре обновления/присоединения, которую требует D3, и все же добавленный углерод отказывается двигаться вместе с остальной частью графика.

Вот мое обновление/создать функцию:

function buildMolecule() { 
    // Update link data 
    link = link.data(links); 

     // Create new links 
    link.enter().append("g") 
      .attr("class", "link") 
      .each(function(d) { 
      d3.select(this) 
       .insert("line", ".node") 
       .style("stroke-width", function(d) { return (d.bond * 2 - 1) * 2 + "px"; }); 

      d3.select(this) 
       .filter(function(d) { return d.bond > 1; }).append("line") 
       .attr("class", "separator"); 

      d3.select(this) 
       .on("click", bondClicked); 
    }); 

    // Delete removed links 
    link.exit().remove();  

    // Update node data 

    node = node.data(nodes); 

    // Create new nodes 
    node.enter().append("g") 
      .attr("class", "node") 
      .on("click", atomClicked) 
      .each(function(d) { 
      console.log('d:', d); 
      // Add node circle 
       d3.select(this) 
       .append("circle") 
       .attr("r", function(d) { return radius(d.size); }) 
       .style("fill", function(d) { return color(d.atom); }); 

      // Add atom symbol 
       d3.select(this) 
       .append("text") 
       .attr("dy", ".35em") 
       .attr("text-anchor", "middle") 
       .text(function(d) { return d.atom; }); 

       d3.select(this).call(force.drag); 
      }); 

     // Delete removed nodes 
    node.exit().remove(); 

    force.start(); 
} 

JsFiddle: http://jsfiddle.net/2dPMF/1/

Любая помощь будет принята с благодарностью!

Answer 1

Вы изменяете структуры данных узлов и ссылок за добавлением и удалением узлов, что испортило компоновку сил. Я говорю об этих строках, в частности.

function bigBang() { 
    links = links.concat(linksList); 
    nodes = nodes.concat(nodesList); 
    buildMolecule(); 
    } 

Первые две строки в этой функции - это то, о чем я говорю. Рабочий jsfiddle here.