D3.js 4.x Data Visualization - Third Edition by Rininsland Andrew & Teller Swizec

Author:Rininsland, Andrew & Teller, Swizec [Rininsland, Andrew]
Language: eng
Format: azw3
Tags: COM051260 - COMPUTERS / Programming Languages / JavaScript, OM012000 - COMPUTERS / Computer Graphics, COM089000 - COMPUTERS / Data Visualization
Publisher: Packt Publishing
Published: 2017-04-28T04:00:00+00:00

Timers

To schedule transitions, D3 uses timers. Even an immediate transition will start after a delay of 17ms.

Far from keeping timers all to itself, D3 lets us use timers so that we can take animation beyond the two-keyframe model of transition. If not familiar with the animation terminology, keyframes define the start or end of a smooth transition.

To create a timer, we use d3.timer(); it takes a function, a delay, and a starting mark. After the set delay (in milliseconds) from the mark, the function will be executed repeatedly until it returns true. The mark should be a date converted into milliseconds since Unix epoch (Date.getTime() will do), or you can let D3 use Date.now() by default.

Let's animate the drawing of a parametric function to work just like the Spirograph toy you might have had as a kid.

We'll create a timer, let it run for a few seconds, and use the millisecond mark as the parameter for a parametric function.

Pass false to easingChart() in chapter5/index.js and add the following to the top:

import spirograph from './spirograph';

spirograph(true);

Next, create a new file in lib/chapter5/, called spirograph.js, and add this to the top:

import * as d3 from 'd3';

import chartFactory from '../common';

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.