d3网络（图形）可视化 - 点击删除节点（+链接）

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数据存储在“nodes”变量中。 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(); 
});