I have a d3 force graph that has a functionality of being able to hide
/unhide
nodes. When a user selects (by double clicking a node(s)) and selecting hide
, the node disappears along with its neighboring links. I have the node disappearing but for some reason the links are not disappearing with them.
Here are the pieces of code related to this function:
// Node behavior for checking if the node is hidden.
node.style("visibility", function(d) {
if (d.data['visible'] === false){
console.log(d.data['id'] + " is hidden.")
return "hidden";
}
else {
return "visible";
}
});
// Link color and visibility based on JSON data.
link.style("stroke", function(d) { return d.data['color'] })
.style("visibility", function(d) {
if (d.data['visible'] === false) {
return "hidden";
}
else {
return "visible";
}});
function hideNode() {
// Checks if any nodes are selected.
if (selectedNodes.length > 0) {
// Iterates over all of the selected nodes.
for (var i = 0; i < selectedNodes.length; i++) {
// Sets the node visible attribute to false and removes the node from the selected array.
selectedNodes[i].data['visible'] = false;
selectedNodes[i].selected = false;
// Iterates through each of the edges to check visibility.
for (var j = 0; j < edges.length; j++) {
if (selectedNodes[i].data.id === edges[j].data.source || selectedNodes[i].data.id === edges[j].data.target) {
edges[j].data['visible'] === false;
}
}
}
}
else alert("No node(s) selected.");
update();
}
function revealNode() {
// nodes.forEach(function(d) {
// d.removed === false;
// });
for (var i = 0; i < nodes.length; i++) {
nodes[i].data['visible'] = true;
}
update();
}
The unhide
works and the hide
works for nodes
but not links
.
For reference here is my graph along with the base code http://bl.ocks.org/joeycf/f021e60bb38846dcfaf2
Not sure what I am doing wrong.
I believe the problem is that you are using === instead of = here:
edges[j].data['visible'] === false;
Hope that helps.