Commit 01103e3b authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

added animation

parent cc2be085
......@@ -2,6 +2,8 @@ import * as d3 from 'd3';
import Chart from '../Chart';
import '../../assets/css/scatterplot.css';
const ANIMATION_DURATION = 500;
export default class extends Chart {
constructor({ container }) {
super({ container });
......@@ -175,7 +177,12 @@ export default class extends Chart {
point.enter()
.append('circle')
.attr('dx', width / 2)
.attr('dy', height / 2)
.merge(point)
.transition()
.duration(ANIMATION_DURATION)
.delay((_, i) => i * (ANIMATION_DURATION / this.values.length))
.attr('dx', d => x(d[0]))
.attr('dy', d => y(d[1]))
.attr('data-z', d => d[2])
......@@ -274,6 +281,8 @@ ${typeof this.categories.name === 'undefined' ? d[2] : this.categories[d[2]]}</b
const ctx = this.canvas.node().getContext('2d');
const hiddenCtx = this.hiddenCanvas.getContext('2d');
this.colorToTooltipMap = {};
const t = d3.timer((elapsed) => {
setTimeout(() => {
ctx.clearRect(0, 0, width, height);
hiddenCtx.clearRect(0, 0, width, height);
nodes.forEach((node, i) => {
......@@ -309,5 +318,8 @@ ${typeof this.categories.name === 'undefined' ? d[2] : this.categories[d[2]]}</b
);
}
});
}, 0);
if (elapsed > ANIMATION_DURATION * 2) t.stop();
}, 0);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment