d3 强制删除节点删除关联的边

Question

请看一下图表。图中有两类-一类是非政府组织，另一类是学术界。

页面顶部有两个按钮，一个代表学术界类别，另一个代表非政府组织类别。

如果我单击非政府组织按钮，它会删除所有 NGO 节点和 NGO 边。但是，不是连接非政府组织和学术界的边缘！

我想要用户单击学术界或非政府组织时的功能。它必须删除与其关联的所有边！没有任何悬边！请让我知道如何实现此功能？

执行切换的代码，

$(".item").click(function () {
$(this).toggleClass("gray");
var text = $(this).find("text").text();
if($(this).hasClass("gray")){
   d3.selectAll(".node")
.filter(function(d,i){
  return d3.select(this).attr("data-type") == text;
})
.style("opacity", 0);
   d3.selectAll(".link")
.filter(function(d,i){
  return d3.select(this).attr("data-type") == text;
})
.style("opacity", 0);
}else {
   d3.selectAll(".node")
.filter(function(d,i){
  return d3.select(this).attr("data-type") == text;
})
.style("opacity", 1);
   d3.selectAll(".link")
.filter(function(d,i){
  return d3.select(this).attr("data-type") == text;
})
.style("opacity", 1).duration(1000); 
}
});

谢谢

Answer 1

我会做什么，在过滤器节点上，我会用隐藏的节点填充一个数组，并且链接通过每个节点并检查它们的源节点或目标节点是否在您创建的数组中。

像这样：

var hiddenNodes = [];
// <!------- TOGGLE FILTERS -------->
$(".item").click(function() {
  $(this).toggleClass("gray");

  var text = $(this).find("text").text();

  if ($(this).hasClass("gray")) {
    hiddenNodes = []; //set array to empty
    d3.selectAll(".node")
      .filter(function(d, i) {
        // console.log(d)
        return d3.select(this).attr("data-type") == text;
      })
      .style("opacity", 0)
      .each(function(d) {
        hiddenNodes.push(d.name) /populate with d.name of hidden nodes
      });
    console.log(hiddenNodes)
    d3.selectAll(".link")
      .filter(function(d, i) {
        //console.log(d)
        return hiddenNodes.indexOf(d.source.name) > -1 || hiddenNodes.indexOf(d.target.name) > -1 //if source or target node is in the hidden array, return this link to change opacity to 0
          //return d3.select(this).attr("data-type") == text;
      })
      .style("opacity", 0);

  } else {
    hiddenNodes = [];
    d3.selectAll(".node")
      .filter(function(d, i) {
        return d3.select(this).attr("data-type") == text;
      })
      .style("opacity", 1)
      .each(function(d) {
        hiddenNodes.push(d.name)
      });

    d3.selectAll(".link")
      .filter(function(d, i) {
        return hiddenNodes.indexOf(d.source.name) > -1 || hiddenNodes.indexOf(d.target.name) > -1
          // return d3.select(this).attr("data-type") == text;
      })
      .style("opacity", 1) //.duration(1000);
  }

});

更新的 plnkr ：https://plnkr.co/edit/PXCMTUDIvbnX5w5eyNXX?p=preview

d3 强制删除节点删除关联的边

d3 force on removing a node remove associated edges

javascript

d3.js

force-layout