blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Allow to put labels outside donut.

Browse Source
master-patched
Tomasz Werbicki 12 years ago
parent 93f960652c
commit a597d3ee36
5 changed files with 134 additions and 49 deletions
Show Stats Download Patch File Download Diff File

80
nv.d3.js
Unescape Escape View File

@ -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(' + 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')
});
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('text-anchor', 'middle') //center the text on it's origin
.style('fill', '#000');
d3.transition(slices.select('text'))
//.ease('bounce')
.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!
.text(function(d, i) {
var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
return (d.value && percent > labelThreshold) ? getX(d.data) : '';
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
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(_) {

4
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

78
src/models/pie.js
Unescape Escape View File

@ -10,6 +10,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;
@ -123,27 +124,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(' + 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')
});
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('text-anchor', 'middle') //center the text on it's origin
.style('fill', '#000');
d3.transition(slices.select('text'))
//.ease('bounce')
.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!
.text(function(d, i) {
var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
return (d.value && percent > labelThreshold) ? getX(d.data) : '';
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
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] + ")";
});
});
}
@ -220,6 +254,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 = _;

2
src/models/pieChart.js
Unescape Escape View File

@ -148,7 +148,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(_) {

19
src/nv.d3.css
Unescape Escape View File

@ -1,6 +1,6 @@
/********************
* HTML CSS
* HTML CSS
*/
@ -12,7 +12,7 @@
/********************
* TOOLTIP CSS
* TOOLTIP CSS
*/
.nvtooltip {
@ -69,7 +69,7 @@
/********************
* SVG CSS
* SVG CSS
*/
@ -274,8 +274,13 @@ svg .title {
*/
}
.nvd3.nv-pie .nv-label rect {
fill-opacity: 0;
stroke-opacity: 0;
}
/**********
* Lines
* Lines
*/
.nvd3 .nv-groups path.nv-line {
@ -363,7 +368,7 @@ svg .title {
/**********
* Distribution
* Distribution
*/
.nvd3 .nv-distribution {
@ -373,7 +378,7 @@ svg .title {
/**********
* Scatter
* Scatter
*/
.nvd3 .nv-groups .nv-point {
@ -482,7 +487,7 @@ svg .title {
/**********
* Sparkline plus
* Sparkline plus
*/
.nvd3.nv-sparklineplus .nv-hoverValue line {

Write Preview
Loading…
Cancel
Save