d3 vigueur la suppression d'un nœud de supprimer les bords associés

Question

Link to code (Plunker)

S'il vous plaît jeter un oeil sur le graphique. Il y a deux catégories dans le graphique - l'une est l'organisation non gouvernementale et l'autre est Academia.

Il y a deux boutons en haut de la page, l'un représentant la catégorie Academia et l'autre représentant la catégorie ONG.

Si je clique sur le bouton Organisation non gouvernementale, il supprime tous les nœuds d'ONG et les bords d'ONG. Mais, pas le bord qui relie l'ONG et l'Académie!

Je veux la fonctionnalité lorsque l'utilisateur clique sur Academia ou ONG. Il doit enlever tous les bords qui lui sont associés! sans bords suspendus! S'il vous plaît laissez-moi savoir comment réaliser cette fonctionnalité?

code

qui effectue la bascule,

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

Merci

Answer 1

Ce que je ferais, sur les nœuds de filtre, je remplir un tableau avec les noeuds qui sont cachés, et pour les liens passer par chacun et vérifiez si leur source ou le noeud cible est dans le tableau que vous créez.

Quelque chose comme ceci:

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

}); 

Mise à jour plnkr: https://plnkr.co/edit/PXCMTUDIvbnX5w5eyNXX?p=preview