Search code examples
javascriptd3.jsforce-layoutgraph-visualization

d3 Links Not Properly Hiding


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.


Solution

  • I believe the problem is that you are using === instead of = here:

    edges[j].data['visible'] === false;
    

    Hope that helps.