Design options for user selection of sets of nodes in d3.js force directed graph
I am working on an interactive graph visualization using the d3.js force-directed layout. I want users to be able to select sets of nodes by clicking on them one by one. I have a set of computations that I’ll allow users to perform on the selected set. For example, the user could select two different nodes and then ask the system to compute the shortest path between them (if there is one).
So, the question is how to represent the selected set of nodes so that I can (a) allow the user to add and remove nodes from the set, (b) visualize the selected nodes (e.g., by highlighting them), and (c) perform computations on the nodes.
I see a few different options that work at different points in the d3 pipeline.
One is to have a flag on the data itself that indicates whether a node is selected or not. Highlighting the nodes is easy: the various style and attribute functions look at the d.selected flag. I’m not sure what the best strategy is for handling selecting and deselecting nodes, though. Do I set the data value, then rerun the whole d3.selectAll.data.enter.. mess?
Another option is to keep a separate array of selected nodes as a global variable. That makes finding the set of nodes easy. To implement highlighting the style/attribute functions would see if the given node is in the set. Again, I’m not sure how to make the visualization change when a node is added or removed from the set.
The final option is to change the style/attributes on each node right at the moment it is clicked. But then how do I determine the set of selected nodes?
Any advice would be greatly appreciated!