a Canvas example that shows how to drag multiple shapes inside of another shape. notice that the red network-node circles can be dragged independently. notice that the black rectangle can also be dragged, keeping it's red-circle children in the same relative positions.
you could also think about this problem as "how to create a hierarchy of draggable shapes?". the short answer is: do it in the dragSubject() function
d3-drag docs on drag subjects
a fork of Multiple Shape Drag Canvas
inspiration from blocks graph neighbors on mouseover and Force-Directed Graph
an iteration on this very helpful stackoverflow answer
this collection of d3-drag experiments also exist in github repo form at micahstubbs/d3-drag-experiments
xxxxxxxxxx<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script> <meta charset="utf-8"> <title>d3-drag-experiments</title> </head> <body> <script src="vis.js"></script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js