d3 force on removing a node remove associated edges

Question

Link to code (Plunker)

Please take a look at the graph. There are two categories in the graph - one is Non-governmental organization and another is Academia.

There are two buttons at the top of the page one is to represent Academia category and another is to represent NGO category.

If I click the Non-Governmental organization button it removes all the NGO nodes and NGO edges. But, not the edge that connects the NGO and the Academia!

I want the functionality when user clicks either Academia or NGO. It has to remove all the edges associated with it! without any hanging edges! Please let me know how to achieve this functionality?

Code that performs the toggle,

$(".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); 
}
});

Thanks

Answer 1

What I would do, on the filter nodes, I would populate an array with the nodes that are hidden, and for the links go through each one and check if their source or target node is in the array you create.

Something like this :

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);
  }

});

Updated plnkr : https://plnkr.co/edit/PXCMTUDIvbnX5w5eyNXX?p=preview