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!
No comments:
Post a Comment