I have been trying to achieve highlighting adjacent nodes functionality, which I've found old examples of in a few places

https://bl.ocks.org/mapio/53fed7d84cd1812d6a6639ed7aa83868 https://bl.ocks.org/martinjc/7aa53c7bf3e411238ac8aef280bd6581 How to implement highlight and transition effect for nodes in D3js force directed graph?

here's my codepen attempt.

I've gotten the closest trying Martin's implementation, but I think the older d3 version might be causing issues (forEach?).

// build a dictionary of nodes that are linked
var linkedByIndex = {};
links.forEach(function(d) {
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});

// check the dictionary to see if nodes are linked
function isConnected(a, b) {
    return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}

// fade nodes on hover
function mouseOver(opacity) {
    return function(d) {
        // check all other nodes to see if they're connected
        // to this one. if so, keep the opacity at 1, otherwise
        // fade
        nodes.style("stroke-opacity", function(o) {
            thisOpacity = isConnected(d, o) ? 1 : opacity;
            return thisOpacity;
        });
        nodes.style("fill-opacity", function(o) {
            thisOpacity = isConnected(d, o) ? 1 : opacity;
            return thisOpacity;
        });
        // also style link accordingly
        links.style("stroke-opacity", function(o) {
            return o.source === d || o.target === d ? 1 : opacity;
        });
        links.style("stroke", function(o){
            return o.source === d || o.target === d ? o.source.colour : "#ddd";
        });
    };
}