Selecting a group of nodes

[jandot]

Dear @vasturiano,

I'd need a good way to brush/select a group of nodes in the network, and then return e.g. the IDs of those nodes. Instead of selecting node by node, I'd like to do that by dragging a box around those nodes. Here is an example in Observable of what I mean: http://bl.ocks.org/pkerpedjiev/0389e39fad95e1cf29ce , although that example has a bit more functionality that what I need.

This would obviously interfere with panning and zooming of the canvas, but ideally pressing e.g. the shift-key could switch to brush mode.

Is it possible to do this in force-graph?

Thank you,
jan.

[vasturiano]

@jandot I think this is certainly possible to do.

You can overlay a transparent div on top of the force-graph canvas where you'd catch all the pointer interactions related to the brushing (perhaps d3-brush can help here), and manipulate the nodes styling in the graph itself by figuring out the intersection between the brush box and the nodes coordinates. You can use screen2GraphCoords to convert between the two domains.

You can even allow pass-throughs of the pointer events to the lower graph layer with some modifier key, like shift.

All of this can be achieved external to this component I believe.

[jandot]

That's a good suggestion. I've trying to do this now, but can't find a way to apply modifier keys. Is there a way in force-graph to only do panning/zooming/... when eg the shift key is pressed, and otherwise event our sent to a layer underneath?

[vasturiano]

@jandot you can reverse the order here. F.e. put your pointer trap div "in front" of the graph, so it's the first dom element to get the pointer events. Then you can decide which ones to handle and which ones to propagate further into the layer behind (the force graph canvas), for instance you handle those with a shift modifier key and propagate the rest, or vice-versa.