Dc.js pieChart slice move
I would like to move the dc.js pieChart chunks outward when they are selected.
I want to do this basically when a slice of the pie is selected:
var arcOver = d3.svg.arc()
.outerRadius(outerRadius + 10)
.innerRadius(innerRadius + 10);
I would like to have this as the default behavior in dc.js.
Any idea that works in dc.js to change the desired effect?
source to share
It's actually quite annoying to get better for several reasons:
- You need to fight with dc.js inline transitions.
- None of the internal radius or arc calculations are displayed.
This is one of those places where you can change the behavior externally, but in practice it might be easier to just change the library.
I'll share a partial solution, but it's a little awkward because it only solves the second problem. Somewhere on SO I found a way to override the start and end states of a pie chart transition, just to prove I can do it.
Instead, it just applies the change after all transitions. So it escapes a little.
We need to copy the arc generation code from dc pieChart
:
function arcGen(chart, offset) {
var maxRadius = d3.min([chart.width(), chart.height()]) / 2;
var givenRadius = chart.radius();
var radius = givenRadius && givenRadius < maxRadius ? givenRadius : maxRadius;
return d3.svg.arc()
.outerRadius(radius - chart.externalRadiusPadding() + offset)
.innerRadius(chart.innerRadius() + offset);
}
The first few lines are a paraphrase of how a pie chart defines a radius. We then create an arc generator and possibly offset it to what the pie chart naturally uses.
Now we can apply a "renderlet" (event handler for the event after all transitions are complete) to change all selected arcs to a larger radius. We also need to restore any unselected arcs to a smaller radius:
chart.on('renderlet', function(chart) {
var regArc = arcGen(chart, 0), bigArc = arcGen(chart, 40);
chart.selectAll('g.pie-slice path')
.attr('d', function(d, i) {
return d3.select(this.parentNode).classed('selected') ? bigArc(d, i) : regArc(d, i);
});
});
And here's a demo: https://jsfiddle.net/1z2ckx87/6/
GIF shows erratic behavior:
If you're committed to this approach and don't care about transitions, you can turn them off to get rid of acne:
chart
.transitionDuration(0)
source to share