Draw a line on, and the edge cases of its length
The reveal is a plain transition on one attribute, so it can be waited for with await ... end(). Both edge cases have a length of 0, so a reveal function should return at once for them.
A line can be drawn on with one dash trick. A path whose number of points changes needs a tween that you write, or it wiggles. And a shape such as an arc must be rebuilt from an interpolated angle at every frame, never interpolated as text.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write reveal(path, ms) that draws a path on, returns a promise, does nothing when the length is 0, and clears the dash even when the transition is interrupted.
Write padTo(values, n) that repeats the last value until the array has n items, and use it so that a 6-month line can animate into a 12-month line.
Explain it without notes
Explain how stroke-dasharray and stroke-dashoffset draw a line on.
Why does a transition between two lines with a different number of points look wrong?
Why does an arc disappear in the middle of transition.attr("d", ...), and what is the fix?
Preview
Console
Nothing logged yet.Expected console output
the line is 4226 units long, from 365 points
before the reveal the line is hidden: dashoffset equals length: true
after the reveal, dashoffset: 0
cleaned up: null null
empty data: d = null | length 0
one point: d = M10,104.752Z | length 0