D3 JS - Force Graph - не перезапускает макет после удаления узла

Question

UPDATE: График теперь корректно ведет себя после удаления узлов (узлов). Однако, когда я условно удаляю непоследовательные узлы (например, 4,5,10), граф не отображает правильные узлы.

Ознакомьтесь с обновленным обработчиком щелчков ниже (много отладки). Я пытаюсь удалить все узлы со значением «d.source» == «news24», которые являются большими синими кругами. Несмотря на то, что после «удаления» массив правильный, отображаются неправильные узлы. Я подозреваю, что это связано с node.exit(), но я не уверен.

Полный обновленный код: http://www.darkness.co.za/code/graph_test_2.zip

$('#btnRemove').click(function(e) { 
// These are the large blue circles 
var sourceToHide = "news24"; 

// DEBUG - Before Removal 
for (i=0; i < nodes.length; i++) { 
    console.log("node_object[" + i + "].source = " + nodes[i].source); 
    console.log("-----------------------------------"); 
} 

// Hold indices of items to remove 
var itemsToRemove = []; 

// Find items with the source to remove 
for (i=0; i < nodes.length; i++) { 
    var nodeSource = nodes[i].source; 

    console.log("Node source = " + nodeSource + " sourceToHide = " + sourceToHide);   

    if (nodeSource == sourceToHide) { 
     itemsToRemove.push(i); 
    } 
} 

// Reverse removal array - makes splice work as expected 
itemsToRemove.reverse(); 

// Remove items 
for (i=0; i < itemsToRemove.length; i++) { 
    nodes.splice(itemsToRemove[i], 1); 
} 

// DEBUG - After Removal 
for (i=0; i < nodes.length; i++) { 
    console.log("node_object[" + i + "].source = " + nodes[i].source); 
    console.log("-----------------------------------"); 
} 

// Rebind the nodes to the array 
node = svg.selectAll("circle") 
.data(nodes) 

// Remove the exit'ed node 
node.exit().remove(); 

// Tell the layout that this is the new set of nodes 
// so that it doesn't include the old one in the computation 
force 
.nodes(nodes) 

// That's it. No need to restart the force layout 

});

Я много искал и пробовал много примеров в изоляции, но не смог решить эту проблему для моей конкретной установки и данных.

Код:
Извиняюсь, у меня были проблемы с настройкой его на JSFiddle (внешние файлы и т.д.), так что вы можете получить полный код здесь: http://darkness.co.za/code/graph_test.zip

То, что я хочу добиться:
(для этого test) Я хочу удалить один узел, а затем перерисовать/перезапустить график

Что я пробовал:
Я попытался удалить последний элемент из массива узлов, а затем перерисовать график (круги и линии), а затем вызовите force.start()

Проблема:
Узел исчезает по желанию, но весь график перестает отвечать.

Как правильно удалить узел, а затем успешно запустить график с его нормальным режимом Drag?

Примечание: Я в конце «drawGraph()» вызов функции «force.start()»

Благодарности

Answer 1

Вам не нужно «перезагрузить» график в этом случае , Все, что вам нужно сделать, это удалить узел из DOM и указать макет силы, что есть новый набор узлов (тот же набор, что и до MINUS, удаленный). Таким образом, в данной кнопки мыши обработчик:

// Button Listeners 
$('#btnRemove').click(function(e) { 
    // Remove the node from the array 
    nodes.splice((nodes.length - 1), 1); 

    // Rebind the nodes to the array 
    node = svg.selectAll(".node") 
    .data(nodes) 

    // Remove the exit'ed node 
    node.exit().remove(); 

    // Tell the layout that this is the new set of nodes 
    // so that it doesn't include the old one in the computation 
    force 
    .nodes(nodes) 

    // That's it. No need to restart the force layout 
}); 

Это не касается удаления связи линии узла, но вы можете следить за тот же подход, чтобы сделать это.