a Canvas example that shows how to drag multiple shapes inside of another shape. notice that the red network-node circles can be dragged. notice that the white background of the plot can also be dragged, while keeping the red-circle children of the invisible background 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 with Force Simulation
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
<!DOCTYPE html>
<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>
gimp xcf file � � B� B� gimp-image-grid (style solid)
(fgcolor (color-rgba 0.000000 0.000000 0.000000 1.000000))
(bgcolor (color-rgba 1.000000 1.000000 1.000000 1.000000))
(xspacing 10.000000)
(yspacing 10.000000)
(spacing-unit inches)
(xoffset 0.000000)
(yoffset 0.000000)
(offset-unit inches)
� � � )Screen Shot 2017-09-10 at 9.38.02 PM.png �
\ � � � . . . .* � � � � � � � � � � , <