Commit 79dfbaa2 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

added click events

parent f53a806e
......@@ -9,6 +9,8 @@
<div id="barplot-controls">
<span>API examples:</span>
<button onclick="update()">update()</button>
<button onclick="toPNG()">toPNG()</button>
<button onclick="toSVG()">toSVG()</button>
</div>
<div id="barplot-container"></div>
</body>
......
......@@ -6,11 +6,17 @@
}
.ac-bar-group rect:hover {
opacity: 0.6;
stroke: #f00;
}
.ac-bar-legend-element {
cursor: pointer;
}
.ac-bar-axis path {
stroke: #d6d6d6;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.ac-bar-left-axis path {
......@@ -27,4 +33,6 @@
.ac-bar-right-axis .tick line {
stroke: #d6d6d6;
stroke-width: 1px;
shape-rendering: crispEdges;
}
\ No newline at end of file
......@@ -39,6 +39,7 @@ export default class extends Chart {
categories,
series,
barClickCallback,
legendClickCallback,
}) {
const groups = series.map(d => d.name);
const data = [];
......@@ -58,7 +59,7 @@ export default class extends Chart {
const margin = {
top: this.containerWidth / 15,
right: this.containerWidth / 15,
right: this.containerWidth / 5,
bottom: this.containerWidth / 15,
left: this.containerWidth / 15,
};
......@@ -102,45 +103,98 @@ export default class extends Chart {
.attr('transform', `translate(${width}, ${0})`)
.call(d3.axisLeft(y).tickSizeInner(width).tickFormat(''));
const barGroup = this.svg.selectAll('.ac-bar-group')
const barCollection = this.svg.selectAll('.ac-bar-collection')
.data(categories);
barGroup.enter()
barCollection.enter()
.append('g')
.attr('class', 'ac-bar-group')
.merge(barGroup)
.attr('class', 'ac-bar-collection')
.merge(barCollection)
.attr('transform', d => `translate(${x(d)}, 0)`);
barGroup.exit()
barCollection.exit()
.remove();
const bar = this.svg.selectAll('.ac-bar-group').selectAll('rect')
const barGroup = this.svg.selectAll('.ac-bar-collection').selectAll('.ac-bar-group')
.data(category => data.filter(d => d.category === category));
bar.enter()
.append('rect')
const barGroupEnter = barGroup.enter()
.append('g')
.attr('class', 'ac-bar-group')
.merge(barGroup)
.on('click', d => barClickCallback(d))
.merge(bar)
.on('mouseenter', (d) => {
this.svg.selectAll('.ac-bar-group')
.filter(e => d.group !== e.group)
.style('opacity', 0.2);
})
.on('mouseleave', () => {
this.svg.selectAll('.ac-bar-group')
.style('opacity', 1);
});
barGroup.exit()
.remove();
barGroupEnter.append('rect')
.attr('x', d => xSub(d.group))
.attr('y', d => y(d.y) - 2)
.attr('width', xSub.bandwidth())
.attr('height', d => height - y(d.y) + 2)
.attr('fill', d => color(d.group));
bar.exit()
.remove();
const text = this.svg.selectAll('.ac-bar-group').selectAll('text')
.data(category => data.filter(d => d.category === category));
text.enter()
.append('text')
.merge(text)
barGroupEnter.append('text')
.attr('text-anchor', 'middle')
.attr('transform', d => `translate(${xSub(d.group) + xSub.bandwidth() / 2}, ${y(d.y) - 4})`)
.text(d => d.y);
text.exit()
const legendElementSize = height / 30;
const legend = this.svg.selectAll('.ac-bar-legend-element')
.data(groups);
const selectedGroups = [];
const legendEnter = legend.enter()
.append('g')
.attr('class', 'ac-bar-legend-element')
.merge(legend)
.attr('transform', (d, i) => `translate(${width + legendElementSize}, ${(legendElementSize + legendElementSize / 2) * i})`)
.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);
if (idx >= 0) {
selectedGroups.splice(idx, 1);
} else {
selectedGroups.push(group);
}
if (selectedGroups.length) {
this.svg.selectAll('.ac-bar-group')
.filter(d => !selectedGroups.includes(d.group))
.style('opacity', 0.2);
this.svg.selectAll('.ac-bar-legend-element')
.filter(d => !selectedGroups.includes(d))
.style('opacity', 0.2);
}
});
legend.exit()
.remove();
legendEnter
.append('rect')
.attr('width', legendElementSize)
.attr('height', legendElementSize)
.attr('fill', color);
legendEnter
.append('text')
.attr('text-anchor', 'start')
.style('dominant-baseline', 'central')
.attr('transform', `translate(${legendElementSize + 2}, ${legendElementSize / 2})`)
.text(d => d);
}
}
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