jsnetworkx altering node colors, accessing neighbors

Question

I have drawn a graph with jsNetworkx which is a JavaScript version of Networkx. This port doesn't quite have all the features of Networkx, yet.

My work: http://jsfiddle.net/mrcactu5/VGpRJ/4/

I would like to be able to highlight a node and its neighbors upon mouseover and change their color to #FEFEFE.

Answer 1

I plan to make adding event handlers to the visualization easier in the future, but for now, you have to implement such things yourself with D3.

The basic idea is the following: Assign each SVG node element a unique ID based on the node name. Then, on mouseover (which you bind with D3), get all the neighbors of a node and use the names to find the corresponding SVG elements and change their style.

Example:

jsnx.draw(G3, {
    // ...
    node_attr: {
        r: 8,
        title: function(d) { return d.label;},
        id: function(d) {
            return 'node-' + d.node; // assign unique ID
        }
    }
    // ...
}, true);

// helper method to find and style SVG node elements
function highlight_nodes(nodes, on) {
    nodes.forEach(function(n) {
        d3.select('#node-' + n).style('fill', function(d) {
            return on ? '#EEE' : d.data.color;
        });
    });
}

// bind event handlers
d3.selectAll('.node').on('mouseover', function(d) {
    highlight_nodes(d.G.neighbors(d.node).concat(d.node), true);
});

d3.selectAll('.node').on('mouseout', function(d) {
    highlight_nodes(d.G.neighbors(d.node).concat(d.node), false);
});

DEMO