Title

Saturday, 7 February 2015

Hide more than one json d3 group


I have a json file with more than one 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, I have the following code that hides the nodes of a 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 to hide all nodes except the one labeled as "Q2". I tried adding a second .style attribute but that doesn't work. I don't know what I should do. Any help is greatly appreciated!

Answer

No comments:

Post a Comment