d3 network (graph) визуализация - удалить узел (+ ссылки) при нажатии

Question

Я пытался настроить следующий код: https://bl.ocks.org/mbostock/4062045 таким образом, чтобы можно было удалить узел + его ссылки на мыши- нажмите кнопку.

То, что я пытался до сих пор добавлял следующий код:

.on("click",function() { 
      d3.select(this).remove(); 
      restart(); 
      }) 

И этот фрагмент кода здесь: https://bl.ocks.org/mbostock/1095795

function restart() { 

    // Apply the general update pattern to the nodes. 
    node = node.data(nodes, function(d) { return d.id;}); 
    node.exit().remove(); 
    node = node.enter().append("circle").attr("fill", function(d) { return color(d.id); }).attr("r", 8).merge(node); 

    // Apply the general update pattern to the links. 
    link = link.data(links, function(d) { return d.source.id + "-" + d.target.id; }); 
    link.exit().remove(); 
    link = link.enter().append("line").merge(link); 

    // Update and restart the simulation. 
    simulation.nodes(nodes); 
    simulation.force("link").links(links); 
    simulation.alpha(1).restart(); 
} 

Если я сначала указать узлы и ссылки следующим образом:

var nodes = [{id: "Simplice"},{id: "Valjean"}] 
    var links = [{"source": "Simplice", "target": "Valjean", "value": 3}] 

restart(); удаляет все узлы и ссылки, кроме указанных, - я пытаюсь добиться противоположности. Поэтому я могу удалить все элементы, кроме указанных, и график красиво перерисовывается, но я не могу удалить выбранные узлы.

d3.select (this) .remove(); удаляет узел, но не ссылки, и не перерисовывает граф.

Моя идея: 1. сохранить данные json в переменной «узлы». 2. Удалите элемент и его ссылки из переменной «узлы» щелчком мыши.

Затем график должен хорошо перерисоваться. Есть идеи, как это сделать?

Answer 1

Вместо изменения документа с d3.select(this).remove(), вам необходимо изменить сами данные (т.е. nodes и links вместо node и link). Я думаю, что это в основном то, что вы описываете в конце своего вопроса.

Например, попробовать что-то вроде этого:

.on("click", function(d){ 
    nodes = nodes.filter(function(n){ return n.id !== d.id; }); 
    links = links.filter(function(e){ 
     return e.source.id !== d.id && e.target.id !== d.id; 
    }); 
    restart(); 
});