@ -18,6 +18,7 @@ nv.models.pie = function() {
, donutLabelsOutside = false
, labelThreshold = . 02 //if slice percentage is under this, don't show label
, donut = false
, labelSunbeamLayout = false
, dispatch = d3 . dispatch ( 'chartClick' , 'elementClick' , 'elementDblClick' , 'elementMouseover' , 'elementMouseout' )
;
@ -29,6 +30,7 @@ nv.models.pie = function() {
var availableWidth = width - margin . left - margin . right ,
availableHeight = height - margin . top - margin . bottom ,
radius = Math . min ( availableWidth , availableHeight ) / 2 ,
arcRadius = radius - ( radius / 5 ) ,
container = d3 . select ( this ) ;
@ -61,7 +63,7 @@ nv.models.pie = function() {
var arc = d3 . svg . arc ( )
. outerRadius ( ( r adius- ( radius / 5 ) ) ) ;
. outerRadius ( arcR adius) ;
if ( donut ) arc . innerRadius ( radius / 2 ) ;
@ -147,9 +149,21 @@ nv.models.pie = function() {
group
. attr ( 'transform' , function ( d ) {
d . outerRadius = radius + 10 ; // Set Outer Coordinate
d . innerRadius = radius + 15 ; // Set Inner Coordinate
return 'translate(' + labelsArc . centroid ( d ) + ')'
if ( labelSunbeamLayout ) {
d . outerRadius = arcRadius + 10 ; // Set Outer Coordinate
d . innerRadius = arcRadius + 15 ; // Set Inner Coordinate
var rotateAngle = ( d . startAngle + d . endAngle ) / 2 * ( 180 / Math . PI ) ;
if ( ( d . startAngle + d . endAngle ) / 2 < Math . PI ) {
rotateAngle -= 90 ;
} else {
rotateAngle += 90 ;
}
return 'translate(' + labelsArc . centroid ( d ) + ') rotate(' + rotateAngle + ')' ;
} else {
d . outerRadius = radius + 10 ; // Set Outer Coordinate
d . innerRadius = radius + 15 ; // Set Inner Coordinate
return 'translate(' + labelsArc . centroid ( d ) + ')'
}
} ) ;
group . append ( 'rect' )
@ -159,7 +173,7 @@ nv.models.pie = function() {
. attr ( "ry" , 3 ) ;
group . append ( 'text' )
. style ( 'text-anchor' , 'middle' ) //center the text on it's origin
. style ( 'text-anchor' , labelSunbeamLayout ? ( ( d . startAngle + d . endAngle ) / 2 < Math . PI ? 'start' : 'end' ) : 'middle' ) //center the text on it's origin or begin/end if orthogonal aligned
. style ( 'fill' , '#000' )
@ -167,9 +181,21 @@ nv.models.pie = function() {
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(' + labelsArc . centroid ( d ) + ')' ;
if ( labelSunbeamLayout ) {
d . outerRadius = arcRadius + 10 ; // Set Outer Coordinate
d . innerRadius = arcRadius + 15 ; // Set Inner Coordinate
var rotateAngle = ( d . startAngle + d . endAngle ) / 2 * ( 180 / Math . PI ) ;
if ( ( d . startAngle + d . endAngle ) / 2 < Math . PI ) {
rotateAngle -= 90 ;
} else {
rotateAngle += 90 ;
}
return 'translate(' + labelsArc . centroid ( d ) + ') rotate(' + rotateAngle + ')' ;
} else {
d . outerRadius = radius + 10 ; // Set Outer Coordinate
d . innerRadius = radius + 15 ; // Set Inner Coordinate
return 'translate(' + labelsArc . centroid ( d ) + ')'
}
} ) ;
slices . each ( function ( d , i ) {
@ -177,6 +203,7 @@ nv.models.pie = function() {
slice
. select ( ".nv-label text" )
. style ( 'text-anchor' , labelSunbeamLayout ? ( ( d . startAngle + d . endAngle ) / 2 < Math . PI ? 'start' : 'end' ) : 'middle' ) //center the text on it's origin or begin/end if orthogonal aligned
. text ( function ( d , i ) {
var percent = ( d . endAngle - d . startAngle ) / ( 2 * Math . PI ) ;
return ( d . value && percent > labelThreshold ) ? getX ( d . data ) : '' ;
@ -272,6 +299,12 @@ nv.models.pie = function() {
showLabels = _ ;
return chart ;
} ;
chart . labelSunbeamLayout = function ( _ ) {
if ( ! arguments . length ) return labelSunbeamLayout ;
labelSunbeamLayout = _ ;
return chart ;
} ;
chart . donutLabelsOutside = function ( _ ) {
if ( ! arguments . length ) return donutLabelsOutside ;