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.

  • How to prevent d3.js force layout from pulsating/bouncing on resume/restart
  • D3 Sankey chart using circle node instead of rectangle node
  • C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , “ERROR: Element 'parsererror' not yet implemented”
  • How to set y-axis to fixed range in rickshaw?
  • d3 - hover on legend to highlight the respective data
  • dc.js - how to create a row chart from multiple columns
  • 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!

  • Trying to understand how D3 .data key function works
  • What does the syntax d._children = d.children; stand for in d3.js?
  • d3.js: How to add labels to scatter points on graph
  • Rails PDFKit not rendering d3 javascript on download
  • Best d3 scale for mapping integers range
  • D3.js: Centering a responsive pie chart in its parent div