javascript - Hide more than one json d3 group -

i have json file more 1 group:

input.json:

{ "nodes": [     {         "name": "q1",         "group": 2     },     {         "name": "aliens",         "group": 1     },     {         "name": "government",         "group": 1     },     {         "name":"corporate",         "group": 1     },     {         "name":"creatures",         "group": 1     },     {         "name":"religion",         "group": 1     },     {         "name": "q2",         "group": 4     },     {         "name": "q2",         "group": 3     } ], "links": [     {         "source": 0,         "target": 1,         "value": 2     },     {         "source": 0,         "target": 2,         "value": 2     },     {         "source": 0,         "target": 3,         "value": 2     },{         "source": 0,         "target": 4,         "value": 2     },{         "source": 0,         "target": 5,         "value": 2     },     {         "source": 0,         "target": 6,         "value": 2     },     {         "source":1,         "target":6,         "value": 2     },     {         "source":2,         "target":6,         "value": 2     } ] } 

currently, have following code hides nodes of group:

var node = svg.selectall(".node")               .data(graph.nodes)               .enter()               .append("circle")               .attr("class", "node")               .attr("r", 20)               .style("fill","black")               .call(force.drag)               .style("visibility", function(d) {                 return d.group == 1 ? "hidden" : "visible";               })               .on("mouseover", function(d) {                 node.style("fill", function(d) { return color(d.group); })               })               .on("click", function(d) {                 if(d.group == 2) {                   node.filter(function(d) { return d.group == 1; }).style("visibility", "visible");                   link.filter(function(d) { return d.value == 2; }).style("visibility", "visible");                    texts.filter(function(d) { return d.group == 1; }).style("visibility", "visible");                 }               }).on("mouseout", function(d) {                node.style("fill","black")             }); 

i want hide nodes except 1 labeled "q2". tried adding second .style attribute doesn't work. don't know should do. appreciated!

update

.style("visibility", function(d) {                 return d.group == 1 ? "hidden" : "visible";return d.group == 4 ? "hidden" : "visible";               }) 

this i'm looking for, except code doesn't work. tried making 2 separate styles also

in ternary operator, before checked d.group == 1 can check d.name !== 'q2' so:

var node = svg.selectall(".node")               .data(graph.nodes)               .enter()               .append("circle")               .attr("class", "node")               .attr("r", 20)               .style("fill","black")               .call(force.drag)               .style("visibility", function(d) {                 return d.name !== 'q2' ? "hidden" : "visible";               })               .on("mouseover", function(d) {                 node.style("fill", function(d) { return color(d.group); })               })               .on("click", function(d) {                 if(d.group == 2) {                   node.filter(function(d) { return d.group == 1; }).style("visibility", "visible");                   link.filter(function(d) { return d.value == 2; }).style("visibility", "visible");                    texts.filter(function(d) { return d.group == 1; }).style("visibility", "visible");                 }               }).on("mouseout", function(d) {                node.style("fill","black")             }); 

-- edit --

since asked using multiple groups, can allow well. can't have multiple return statements execute 1 after another, can use branching direct code execution 1 return or other. wouldn't recommend ternary operator if want have multiple options, since long , confusing, can use regular if-else branching accomplish it. example:

.style("visibility", function(d) {   if (d.group === 1 || d.group === 4) {     return "hidden";   } else {     return "visible"   } }); 

the || operator logical or. in pseudocode, above means:

if d.group equals 1 or d.group equals 4, return "hidden", otherwise return "visible"

if seems confusing, draw out more explicitly:

.style("visibility", function(d) {   if (d.group === 1) {     return "hidden";   }    else if (d.group === 4) {     return "hidden";   }   else {     return "visible";   } }); 

hope helps!