Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Animating a line with an arrow in d3

Public visualization

Viewing a saved revision (read-only)

95466d8a8a0543aaa097548345055281

Animating a line with an arrow in d3

0 stars0🌍 Public
RRSSBDAE
Last edited Jan 16, 2023
Created on Jan 16, 2023

A line animates from source to target as a blue stroke draws itself, while a red arrowhead travels along the same path. The arrow rotates to match the line's direction using `transition.attrTween` and `translateAlong`, which queries the path's geometry with `getPointAtLength`. The line's progress is shown via a `stroke-dasharray` offset transition. The example uses d3.v4's SVG and animation APIs, with the arrow marker defined as a custom `svg:marker` as well as a separate path.

AI-generated description