Question

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

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

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

当用户点击Academia或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强制删除节点删除关联的边缘

1 个答案: