Commit 3f15d798 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

added text to pie slices

parent e53dfc9b
......@@ -3,16 +3,20 @@
fill: #666;
}
.ac-pie-slice {
.ac-pie-slice-path {
cursor: pointer;
stroke: #fff;
stroke-width: 0.5px;
stroke-width: 0;
}
.ac-pie-slice:hover {
.ac-pie-slice-path:hover {
opacity: 0.6;
}
.ac-pie-slice-text {
font-size: 0.75em;
}
.ac-pie-legend-element {
font-size: 0.75em;
cursor: pointer;
......
......@@ -71,18 +71,35 @@ export default class extends Chart {
.value(d => d.value)
.sort(() => {})(circleData);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
const slice = this.svg.selectAll(`.ac-pie-slice.ac-pie-circle-idx-${circleIdx}`)
.data(pie, d => `${circleNum}:${d.data.group}`);
slice.enter()
.append('path')
.merge(slice)
const sliceEnter = slice.enter()
.append('g')
.attr('class', `ac-pie-slice ac-pie-circle-idx-${circleIdx}`)
.attr('transform', `translate(${width / 2}, ${height / 2})`)
.attr('d', d3.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.attr('fill', d => color(d.data.group))
.on('click', d => clickCallback(d.data));
sliceEnter
.append('path')
.attr('class', `ac-pie-slice-path ac-pie-circle-idx-${circleIdx}`)
.attr('transform', `translate(${width / 2}, ${height / 2})`)
.attr('d', arc)
.attr('fill', d => color(d.data.group));
sliceEnter
.append('text')
.attr('class', `ac-pie-slice-text ac-pie-circle-idx-${circleIdx}`)
.attr('x', width / 2)
.attr('y', height / 2)
.attr('transform', d => `translate(${arc.centroid(d)})`)
.style('text-anchor', 'middle')
.style('dominant-baseline', 'central')
.text(d => d.data.value);
const legendX = d3.scaleBand()
.domain(circleGroups)
.range([0, width]);
......@@ -105,12 +122,12 @@ export default class extends Chart {
.attr('fill', color)
.text(d => d)
.on('mouseenter', (d) => {
this.svg.selectAll(`.ac-pie-slice.ac-pie-circle-idx-${circleIdx}`)
this.svg.selectAll(`.ac-pie-slice-path.ac-pie-circle-idx-${circleIdx}`)
.filter(e => e.data.group === d)
.style('fill', '#f00');
})
.on('mouseleave', () => {
this.svg.selectAll('.ac-pie-slice')
this.svg.selectAll('.ac-pie-slice-path')
.style('fill', e => color(e.data.group));
})
.each((_, i, arr) => textUtils.sliceFitText(arr[i], legendX.bandwidth()));
......
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