|
|
|
@ -6354,6 +6354,7 @@ nv.models.pie = function() {
|
|
|
|
|
color = nv.utils.defaultColor(),
|
|
|
|
|
valueFormat = d3.format(',.2f'),
|
|
|
|
|
showLabels = true,
|
|
|
|
|
donutLabelsOutside = false,
|
|
|
|
|
labelThreshold = .02, //if slice percentage is under this, don't show label
|
|
|
|
|
donut = false;
|
|
|
|
|
|
|
|
|
@ -6467,27 +6468,60 @@ nv.models.pie = function() {
|
|
|
|
|
|
|
|
|
|
if (showLabels) {
|
|
|
|
|
// This does the normal label
|
|
|
|
|
ae.append('text')
|
|
|
|
|
var labelsArc = arc;
|
|
|
|
|
if (donutLabelsOutside) {
|
|
|
|
|
labelsArc = d3.svg.arc().outerRadius(arc.outerRadius())
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ae.append("g").classed("nv-label", true)
|
|
|
|
|
.each(function(d, i) {
|
|
|
|
|
var group = d3.select(this);
|
|
|
|
|
|
|
|
|
|
group
|
|
|
|
|
.attr('transform', function(d) {
|
|
|
|
|
d.outerRadius = radius + 10; // Set Outer Coordinate
|
|
|
|
|
d.innerRadius = radius + 15; // Set Inner Coordinate
|
|
|
|
|
return 'translate(' + arc.centroid(d) + ')';
|
|
|
|
|
})
|
|
|
|
|
return 'translate(' + labelsArc.centroid(d) + ')'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
group.append('rect')
|
|
|
|
|
.style('stroke', '#fff')
|
|
|
|
|
.style('fill', '#fff')
|
|
|
|
|
.attr("rx", 3)
|
|
|
|
|
.attr("ry", 3);
|
|
|
|
|
|
|
|
|
|
group.append('text')
|
|
|
|
|
.style('text-anchor', 'middle') //center the text on it's origin
|
|
|
|
|
.style('fill', '#000');
|
|
|
|
|
.style('fill', '#000')
|
|
|
|
|
|
|
|
|
|
d3.transition(slices.select('text'))
|
|
|
|
|
//.ease('bounce')
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
slices.select(".nv-label").transition()
|
|
|
|
|
.attr('transform', function(d) {
|
|
|
|
|
d.outerRadius = radius + 10; // Set Outer Coordinate
|
|
|
|
|
d.innerRadius = radius + 15; // Set Inner Coordinate
|
|
|
|
|
return 'translate(' + arc.centroid(d) + ')';
|
|
|
|
|
})
|
|
|
|
|
//.style('font', 'bold 12px Arial') // font style's should be set in css!
|
|
|
|
|
return 'translate(' + labelsArc.centroid(d) + ')';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
slices.each(function(d, i) {
|
|
|
|
|
var slice = d3.select(this)
|
|
|
|
|
|
|
|
|
|
slice
|
|
|
|
|
.select(".nv-label text")
|
|
|
|
|
.text(function(d, i) {
|
|
|
|
|
var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
|
|
|
|
|
return (d.value && percent > labelThreshold) ? getX(d.data) : '';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var textBox = $(this).find("text")[0].getBBox()
|
|
|
|
|
slice.select(".nv-label rect")
|
|
|
|
|
.attr("width", textBox.width + 10)
|
|
|
|
|
.attr("height", textBox.height + 10)
|
|
|
|
|
.attr("transform", function() {
|
|
|
|
|
return "translate(" + [textBox.x - 5, textBox.y - 5] + ")";
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -6564,6 +6598,12 @@ nv.models.pie = function() {
|
|
|
|
|
return chart;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
chart.donutLabelsOutside = function(_) {
|
|
|
|
|
if (!arguments.length) return donutLabelsOutside;
|
|
|
|
|
donutLabelsOutside = _;
|
|
|
|
|
return chart;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
chart.donut = function(_) {
|
|
|
|
|
if (!arguments.length) return donut;
|
|
|
|
|
donut = _;
|
|
|
|
@ -6747,7 +6787,7 @@ nv.models.pieChart = function() {
|
|
|
|
|
chart.dispatch = dispatch;
|
|
|
|
|
chart.pie = pie; // really just makign the accessible for discretebar.dispatch, may rethink slightly
|
|
|
|
|
|
|
|
|
|
d3.rebind(chart, pie, 'valueFormat', 'values', 'x', 'y', 'id', 'showLabels', 'donut', 'labelThreshold');
|
|
|
|
|
d3.rebind(chart, pie, 'valueFormat', 'values', 'x', 'y', 'id', 'showLabels', 'donutLabelsOutside', 'donut', 'labelThreshold');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
chart.margin = function(_) {
|
|
|
|
|