d3 force layout with groups as "nodes"

Question

I'd like to create a force layout in d3.js where the "nodes" are svg groups rather than individual svg shapes. For instance, imagine a g that contains a collection of points connected in a line: I'd like the force layout to drive the placement of those lines on the screen, without affecting the placement of the individual points on those lines.

Is this possible? If so, how might I make it happen. If not, why?

Answer 1

There's no difference in terms of how you would handle a g element compared to a circle or suchlike as far as the force layout is concerned. You just append a g element with some content for each "node".

Quick demo here.