How do I find neighboring nodes & edges of all selected nodes ? D3

Question

I have a force directed graph with the ability to double click on a node and only that node and its neighbors will be shown, the rest given a hidden class -> visiblity:hidden

But this only works for one node. I have the ability to select multiple nodes and give them a selectedNode class.

Now what I wish to happen is to use this neighboring algorithm on all nodes with the class selectedNode. This is so all selected nodes and the edges connecting them are still shown and the unselected nodes and edges will be hidden.

Here is how I am showing/hiding the edges. Again, this only works for one node d3.select(this).node().__data__;. I have tried d = d3.selectAll("selectedNode").data(); but no luck :(

var linkedByIndex = {};//Create an array logging what is connected to what

for (i = 0; i < graph.data.nodes.length; i++) //-populate the array
{
    linkedByIndex[i + "," + i] = 1;
};


graph.data.edges.forEach(function (d) //-checks what nodes are related in array
{
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});


//-------------------------check if nodes are linked
function neighboring(a, b) //This function looks up whether a pair are neighbours
{
    return linkedByIndex[a.index + "," + b.index];
}

d = d3.select(this).node().__data__;


links.classed("hidden", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? false : true;
        });

Added code

var links = inner.selectAll(".link").append("g")
    .data(force.links())
    .enter().append("line")
    .attr("id", "links")
    .attr("class", "link")
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; })
    .style("marker-end",  "url(#arrow)") //adds arrows, main code on SVG append towards bottom
    .style("stroke-width", lineWidth)   
    ;

Answer 1

I think there a two problems here and since you're short on details I'm going to make assumptions.

1) You have a method to check if two nodes are neighbours. This is a good start but it's not enough, what you also need is a method to tell you if any given node is a selected node or one of it's neighbours. Let's assume you are maintaining a list of selected nodes in an array selected, here is what such a function would look like, in a naive implementation:

function shouldBeVisible(nodeIndex){
    // visible if either selected itself or neighbour of a selected node
    return selected.some(function(d){
        // assuming you don't care about the direction of your edges
        return linkedByIndex[nodeIndex+','+d]+linkedByIndex[d+','+nodeIndex];
    });
}

You can even overload this method to make it "edge friendly":

function shouldBeVisible(sourceIndex, targetIndex){
    if (targetIndex !== undefined)
        return shouldBeVisible(sourceIndex)
            && shouldBeVisible(targetIndex);
    else return selected.some(function(d){
        return linkedByIndex[sourceIndex+','+d]
             + linkedByIndex[d+','+sourceIndex];
    });
}

Note that if you're not maintaining selected nodes in a data structure you should be able to retrieve them without too much effort using d3.selectAll('.selectedNode'). You might want to implement a similar method for your edges.

2) You're only checking for neighbourhood against the first node in the selection instead of all nodes in the selection. Either way you shouldn't have to bother doing this assuming links accurately describes what it refers to.

Try something like this instead:

links.classed("hidden", function(d) {
    return !shouldBeVisible(d.source.index, d.target.index);
});