All examples By author By category About

ironfrown

How to drag and rotate labels in D3

This example shows how to implement drag behaviour for groups of objects and rotate their text labels in the process.

As groups "g" have no coordinates, the example demonstrates how to set the origin of the group before dragging, then translate the group with all its elements, and record its position relative to the origin in the local coordinates "gx" and "gy", which can be used in other operations. This is quite different from Mike Bostok's Drag + Zoom example, which does not rely on groups.

This behaviour is combined with text rotation away from the central point, which was adopted from D3Noob's method of interactive text rotation.