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!


Comments

Post a Comment

Popular posts from this blog

How to access named pipes using JavaScript in Firefox add-on? -

-
i'm trying access named pipe in firefox add-on. code, based on solution 2 this codeproject question, is: var file = components.classes["@mozilla.org/file/local;1"].createinstance(components.interfaces.nsilocalfile); file.initwithpath("\\\\.\\pipe\\test"); var text = "some text written"; var writer = components.classes["@mozilla.org/network/file-output-stream;1"].createinstance(components.interfaces.nsifileoutputstream); // open file read/write access, , create if not exist. writer.init (file, 0x04 | 0x08, -1, 0); writer.write (text, text.length); writer.flush (); writer.close (); when run firefox scratchpad, get: /* exception: component returned failure code: 0x80520012 (ns_error_file_not_found) [nsifileoutputstream.init] @6 */ line 6 line call writer.init. i've played passing different flags writer.init, no luck. i'm able write normal file path code, not named pipe path. i've been searching more information of da...
Read more

multithreading - OPAL (Open Phone Abstraction Library) Transport not terminated when reattaching thread? -

-
i in process of writing application using opal makes h323 calls. have looked online number of working examples , have managed put resembles should like, @ present able call external ip via application when accept call craps out , dies. leaving me with: 0:12.949 setupcall:8752 sert.cxx(259) assertion fail: transport not terminated when reattaching thread , file d:\voip\software\opal\src\opal\transports.cxx, line 1021 passertfunc(0xde3f88, 0xffffffffd228226f, 0, 0) + 0x82 passertfunc(0x10d6e5f8, 0x3fd, 0, 0x10d6eb98) + 0x15b opaltransport::attachthread(0xde5870, 0xffffffffd22fc76b, 0, 0) + 0x96 h323connection::setupconnection(0xffffffffd22fc713, 0, 0, 0xde6ea8) + 0x196 asynchcallsetup(0x10d3572c, 0, 0, 0xdd0108) + 0x7c pthread1arg<psafeptr<opalconnection,psafeptrbase> >::main(0xffffffffd2282faf from have deduced, perhaps incorrectly if there thread lock issue caused (possibly arising fact application sending expected h323 call, throwing in c...
Read more

node.js - req param returns an empty array -

-
i using node.js , mongodb geolocation app , req param returns empty array exports.findpressure = function(req, res) { var queryobject = req.param('q'); console.log(queryobject); db.collection('pressure', function(err, collection) { collection.find( { loc: { $near :[ req.param('q') ] , $maxdistance : 5 }},{"value" : 1, _id : 0}) .sort({_id : -1}).limit(1).toarray(function(err, items) { res.send(items); }); }); }; the longitude , latitude values displayed in console listening on port 3000... connected 'weather' database 8.9068256,52.019347499999995 /pressure?q=8.9068256,52.019347499999995 200 27ms - 2b the url follows http://localhost:3000/pressure?q=8.9068256,52.019347499999995 if use values 8.9068256,52.019347499999995 getting value database if use req.param('q') returning empty array you seem passing values part of query string. req.query.q should contain comma-s...
Read more