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'; ...@@ -2,6 +2,8 @@ import * as d3 from 'd3';
import Chart from '../Chart'; import Chart from '../Chart';
import '../../assets/css/scatterplot.css'; import '../../assets/css/scatterplot.css';
const ANIMATION_DURATION = 500;
export default class extends Chart { export default class extends Chart {
constructor({ container }) { constructor({ container }) {
super({ container }); super({ container });
...@@ -175,7 +177,12 @@ export default class extends Chart { ...@@ -175,7 +177,12 @@ export default class extends Chart {
point.enter() point.enter()
.append('circle') .append('circle')
.attr('dx', width / 2)
.attr('dy', height / 2)
.merge(point) .merge(point)
.transition()
.duration(ANIMATION_DURATION)
.delay((_, i) => i * (ANIMATION_DURATION / this.values.length))
.attr('dx', d => x(d[0])) .attr('dx', d => x(d[0]))
.attr('dy', d => y(d[1])) .attr('dy', d => y(d[1]))
.attr('data-z', d => d[2]) .attr('data-z', d => d[2])
...@@ -274,40 +281,45 @@ ${typeof this.categories.name === 'undefined' ? d[2] : this.categories[d[2]]}</b ...@@ -274,40 +281,45 @@ ${typeof this.categories.name === 'undefined' ? d[2] : this.categories[d[2]]}</b
const ctx = this.canvas.node().getContext('2d'); const ctx = this.canvas.node().getContext('2d');
const hiddenCtx = this.hiddenCanvas.getContext('2d'); const hiddenCtx = this.hiddenCanvas.getContext('2d');
this.colorToTooltipMap = {}; this.colorToTooltipMap = {};
ctx.clearRect(0, 0, width, height); const t = d3.timer((elapsed) => {
hiddenCtx.clearRect(0, 0, width, height); setTimeout(() => {
nodes.forEach((node, i) => { ctx.clearRect(0, 0, width, height);
if (typeof _selectedCategory === 'undefined' || node.getAttribute('data-z') === _selectedCategory) { hiddenCtx.clearRect(0, 0, width, height);
// draw visible point nodes.forEach((node, i) => {
ctx.beginPath(); if (typeof _selectedCategory === 'undefined' || node.getAttribute('data-z') === _selectedCategory) {
ctx.arc( // draw visible point
node.getAttribute('dx'), ctx.beginPath();
node.getAttribute('dy'), ctx.arc(
node.getAttribute('r'), node.getAttribute('dx'),
0, node.getAttribute('dy'),
2 * Math.PI, node.getAttribute('r'),
false, 0,
); 2 * Math.PI,
ctx.fillStyle = node.getAttribute('fillStyle'); false,
ctx.fill(); );
ctx.fillStyle = node.getAttribute('fillStyle');
// draw invisible square with unique color ctx.fill();
const colorCode = i + 1;
// eslint-disable-next-line no-bitwise // draw invisible square with unique color
const r = colorCode >> 16; const colorCode = i + 1;
// eslint-disable-next-line no-bitwise // eslint-disable-next-line no-bitwise
const g = colorCode - (r << 16) >> 8; const r = colorCode >> 16;
// eslint-disable-next-line no-bitwise // eslint-disable-next-line no-bitwise
const b = colorCode - (r << 16) - (g << 8); const g = colorCode - (r << 16) >> 8;
this.colorToTooltipMap[`${r}:${g}:${b}`] = node.getAttribute('title'); // eslint-disable-next-line no-bitwise
hiddenCtx.fillStyle = `rgb(${r}, ${g}, ${b})`; const b = colorCode - (r << 16) - (g << 8);
hiddenCtx.fillRect( this.colorToTooltipMap[`${r}:${g}:${b}`] = node.getAttribute('title');
parseInt(node.getAttribute('dx') - node.getAttribute('r'), 10), hiddenCtx.fillStyle = `rgb(${r}, ${g}, ${b})`;
parseInt(node.getAttribute('dy') - node.getAttribute('r'), 10), hiddenCtx.fillRect(
Math.ceil(node.getAttribute('r') * 2 + 0.5), parseInt(node.getAttribute('dx') - node.getAttribute('r'), 10),
Math.ceil(node.getAttribute('r') * 2 + 0.5), parseInt(node.getAttribute('dy') - node.getAttribute('r'), 10),
); Math.ceil(node.getAttribute('r') * 2 + 0.5),
} Math.ceil(node.getAttribute('r') * 2 + 0.5),
}); );
}
});
}, 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