How to use the d3-timer.interval function in d3-timer
To help you get started, we’ve selected a few d3-timer examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / types / d3-timer / d3-timer-tests.ts View on Github 
d3Timer.timerFlush();
t1.stop(); t2.stop();
// Test timeout Timer definitions --------------------------------
t0 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());
// Test interval Timer definitions --------------------------------
t0 = d3Timer.interval((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.interval((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.interval((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());t0.restart((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());
t0.stop();
d3Timer.timerFlush();
t1.stop(); t2.stop();
// Test timeout Timer definitions --------------------------------
t0 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());
// Test interval Timer definitions --------------------------------
t0 = d3Timer.interval((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.interval((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.interval((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());d3Timer.timerFlush();
t1.stop(); t2.stop();
// Test timeout Timer definitions --------------------------------
t0 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());
// Test interval Timer definitions --------------------------------
t0 = d3Timer.interval((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.interval((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.interval((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());t0.stop();
d3Timer.timerFlush();
t1.stop(); t2.stop();
// Test timeout Timer definitions --------------------------------
t0 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.timeout((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());
// Test interval Timer definitions --------------------------------
t0 = d3Timer.interval((elapsed: number) => { console.log(elapsed); });
t1 = d3Timer.interval((elapsed: number) => { console.log(elapsed); }, 150);
t2 = d3Timer.interval((elapsed: number) => { console.log(elapsed); }, 150, performance.now() || Date.now());// Inspired by http://bl.ocks.org/newby-jay/767c5ffdbbe43b65902f
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ctx.save();
this.drawAnimatedVectorFieldClippingMask(canvasOverlay, ctx, ll);
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
ctx.lineWidth = 0.7;
ctx.strokeStyle = '#FFF';
if (self.timer) {
self.timer.stop();
}
self.timer = d3Interval(function() {
ctx.globalCompositeOperation='destination-out';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation='source-over';
// draw a single timestep for every curve
for (let i=0; i= maxAge) {
particles[i].age = 0;
}componentDidMount() {
let {props: { dispatch }} = this;
dispatch(dataUpdate(alphabet));
interval(() => {
dispatch(dataUpdate(shuffle(alphabet)
.slice(0, Math.floor(Math.random() * 26))
.sort()));
}, 2500);
}componentDidMount() {
const { props: { dispatch } } = this;
this.loop = interval(() => {
dispatch(dataUpdate(shuffle(ALPHABET)
.slice(0, Math.floor(Math.random() * 26))
.sort()));
}, BASE_DURATION * 1.5);
}const k = this.nodeKeys[i];
const n = this.nodeHash[k];
const d = n.data;
if (n.type === ENTER) {
n.setState(start(d, nextKeyIndex[k]));
transition.call(n, enter(d, nextKeyIndex[k]));
} else if (n.type === LEAVE) {
transition.call(n, leave(d, currKeyIndex[k]));
} else {
transition.call(n, update(d, nextKeyIndex[k]));
}
}
if (!this.interval) {
this.interval = interval(this.animate);
} else {
this.interval.restart(this.animate);
}
this.renderNodes();
}componentDidUpdate(prevProps) {
const { duration } = this.state
if (
prevProps.xScale !== this.props.xScale ||
prevProps.yScale !== this.props.yScale
) {
const { xd, yd, yr } = this.getScaleInterpolators(this.props)
this.transition = interval(elapsed => {
const t = easeQuad(elapsed < duration ? elapsed / duration : 1)
this.x.domain(xd(t))
this.y.domain(yd(t)).range(yr(t))
if (t >= 1) {
this.transition.stop()
this.transition = null
}
})
}
}d3-timer
An efficient queue capable of managing thousands of concurrent animations.
