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

【问题标题】：d3 network (graph) visualization - remove node (+ links) on clickd3 网络（图形）可视化 - 单击时删除节点（+ 链接）
【发布时间】：2017-02-16 10:04:01
【问题描述】：

我一直在尝试调整以下代码： https://bl.ocks.org/mbostock/4062045 这样就可以在鼠标单击时删除节点及其链接。

到目前为止，我尝试的是添加以下代码：

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

还有来自这里的 sn-p：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}]

重启();删除除指定节点和链接之外的所有节点和链接 - 我试图实现相反的效果。因此，我可以删除除指定元素之外的所有元素，并且图形可以很好地重绘自身，但我无法使其删除选定的节点。

d3.select(this).remove();删除节点但不删除链接并且不重绘图表。

我的想法是： 1. 将 json 数据存储在“nodes”变量中。 2. 通过鼠标点击从“nodes”变量中删除元素及其链接。

然后图形应该很好地重绘自己。有什么想法吗？

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案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();
});

【讨论】：