d3 Kraft auf einem Knoten entfernen zugehörigen Kanten an der Graph

Question

Link to code (Plunker)

Bitte werfen Sie einen Blick zu entfernen. Es gibt zwei Kategorien in der Grafik - eine ist eine Nichtregierungsorganisation und eine andere ist die Academia.

Es gibt zwei Schaltflächen oben auf der Seite, die die Kategorie "Academia" darstellen, und eine andere, die Kategorie "NRO" zu repräsentieren.

Wenn ich auf die Schaltfläche "Nichtregierungsorganisation" klicke, werden alle NGO-Knoten und NGO-Kanten entfernt. Aber nicht der Rand, der die NGO mit der Academia verbindet!

Ich möchte die Funktionalität, wenn der Benutzer entweder Academia oder NGO klickt. Es muss alle damit verbundenen Kanten entfernen! ohne hängende Kanten! Bitte lassen Sie mich wissen, wie Sie diese Funktionalität erreichen können?

-Code, der das Umschalten durchführt,

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

Dank

Answer 1

Was ich tun würde, auf den Filterknoten ich ein Array mit den Knoten füllen würde, die versteckt sind, und für die Verbindungen gehen durch und überprüfen Sie, ob sich ihr Quell- oder Zielknoten in dem von Ihnen erstellten Array befindet.

Etwas wie folgt aus:

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

}); 

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