Commit d9f8d2e9 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

added some animation logic

parent 79dfbaa2
...@@ -39,7 +39,6 @@ export default class extends Chart { ...@@ -39,7 +39,6 @@ export default class extends Chart {
categories, categories,
series, series,
barClickCallback, barClickCallback,
legendClickCallback,
}) { }) {
const groups = series.map(d => d.name); const groups = series.map(d => d.name);
const data = []; const data = [];
...@@ -58,7 +57,7 @@ export default class extends Chart { ...@@ -58,7 +57,7 @@ export default class extends Chart {
.range(d3.schemeSet3); .range(d3.schemeSet3);
const margin = { const margin = {
top: this.containerWidth / 15, top: this.containerWidth / 12,
right: this.containerWidth / 5, right: this.containerWidth / 5,
bottom: this.containerWidth / 15, bottom: this.containerWidth / 15,
left: this.containerWidth / 15, left: this.containerWidth / 15,
...@@ -160,25 +159,26 @@ export default class extends Chart { ...@@ -160,25 +159,26 @@ export default class extends Chart {
.merge(legend) .merge(legend)
.attr('transform', (d, i) => `translate(${width + legendElementSize}, ${(legendElementSize + legendElementSize / 2) * i})`) .attr('transform', (d, i) => `translate(${width + legendElementSize}, ${(legendElementSize + legendElementSize / 2) * i})`)
.on('click', (group) => { .on('click', (group) => {
this.svg.selectAll('.ac-bar-group')
.style('opacity', 1);
this.svg.selectAll('.ac-bar-legend-element')
.style('opacity', 1);
const idx = selectedGroups.indexOf(group); const idx = selectedGroups.indexOf(group);
if (idx >= 0) { if (idx >= 0) {
selectedGroups.splice(idx, 1); selectedGroups.splice(idx, 1);
} else { } else {
selectedGroups.push(group); selectedGroups.push(group);
} }
if (selectedGroups.length) {
this.svg.selectAll('.ac-bar-group') this.svg.selectAll('.ac-bar-group')
.filter(d => !selectedGroups.includes(d.group)) .each((d, i, arr) => {
.style('opacity', 0.2); d3.select(arr[i])
.transition()
.duration(500)
.style('opacity', selectedGroups.length === 0 || selectedGroups.includes(d.group) ? 1 : 0.2);
});
this.svg.selectAll('.ac-bar-legend-element') this.svg.selectAll('.ac-bar-legend-element')
.filter(d => !selectedGroups.includes(d)) .each((d, i, arr) => {
.style('opacity', 0.2); d3.select(arr[i])
} .transition()
.duration(500)
.style('opacity', selectedGroups.length === 0 || selectedGroups.includes(d) ? 1 : 0.2);
});
}); });
legend.exit() legend.exit()
......
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