@ -266,6 +266,7 @@ nv.models.axis = function() {
//Default Settings
var scale = d3 . scale . linear ( ) ,
axisLabelText = null ,
showMaxMin = true ,
highlightZero = true ;
//TODO: considering adding margin
@ -276,13 +277,19 @@ nv.models.axis = function() {
function chart ( selection ) {
selection . each ( function ( data ) {
var container = d3 . select ( this ) ;
var wrap = container . selectAll ( 'g.wrap.axis' ) . data ( [ data ] ) ;
var wrapEnter = wrap . enter ( ) . append ( 'g' ) . attr ( 'class' , 'wrap axis' ) ;
var gEnter = wrapEnter . append ( 'g' ) ;
var g = wrap . select ( 'g' )
if ( axis . orient ( ) == 'top' || axis . orient ( ) == 'bottom' )
axis . ticks ( Math . abs ( scale . range ( ) [ 1 ] - scale . range ( ) [ 0 ] ) / 100 ) ;
//TODO: consider calculating height based on whether or not label is added, for reference in charts using this component
//TODO: consider calculating width/ height based on whether or not label is added, for reference in charts using this component
var axisLabel = d3. select ( this ) . selectAll ( 'text.axislabel' )
var axisLabel = g . selectAll ( 'text.axislabel' )
. data ( [ axisLabelText || null ] ) ;
axisLabel . exit ( ) . remove ( ) ;
switch ( axis . orient ( ) ) {
@ -292,40 +299,84 @@ nv.models.axis = function() {
. attr ( 'y' , 0 ) ;
axisLabel
. attr ( 'x' , scale . range ( ) [ 1 ] / 2 ) ;
break ;
case 'right' :
axisLabel . enter ( ) . append ( 'text' ) . attr ( 'class' , 'axislabel' )
. attr ( 'transform' , 'rotate(90)' )
. attr ( 'y' , - 40 ) ; //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
. attr ( 'x' , - scale . range ( ) [ 0 ] / 2 ) ;
break ;
break ;
case 'bottom' :
axisLabel . enter ( ) . append ( 'text' ) . attr ( 'class' , 'axislabel' )
. attr ( 'text-anchor' , 'middle' )
. attr ( 'y' , 25 ) ;
axisLabel
. attr ( 'x' , scale . range ( ) [ 1 ] / 2 ) ;
break ;
break ;
case 'right' :
axisLabel . enter ( ) . append ( 'text' ) . attr ( 'class' , 'axislabel' )
. attr ( 'transform' , 'rotate(90)' )
. attr ( 'y' , - 40 ) ; //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
. attr ( 'x' , - scale . range ( ) [ 0 ] / 2 ) ;
if ( showMaxMin ) {
var axisMaxMin = wrap . selectAll ( 'g.axisMaxMin' )
. data ( scale . domain ( ) ) ;
axisMaxMin . enter ( ) . append ( 'g' ) . attr ( 'class' , 'axisMaxMin' ) . append ( 'text' ) ;
axisMaxMin . exit ( ) . remove ( ) ;
//container.selectAll('g.axisMaxMin')
axisMaxMin
. attr ( 'transform' , function ( d , i ) {
return 'translate(0,' + scale . range ( ) [ i ] + ')'
} )
. select ( 'text' )
. attr ( 'dy' , '.32em' )
. attr ( 'dx' , axis . tickPadding ( ) )
. attr ( 'text-anchor' , 'start' )
. text ( function ( d , i ) {
return axis . tickFormat ( ) ( d )
} )
}
break ;
case 'left' :
axisLabel . enter ( ) . append ( 'text' ) . attr ( 'class' , 'axislabel' )
. attr ( 'transform' , 'rotate(-90)' )
. attr ( 'y' , - 40 ) ; //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
. attr ( 'x' , - scale . range ( ) [ 0 ] / 2 ) ;
break ;
if ( showMaxMin ) {
var axisMaxMin = wrap . selectAll ( 'g.axisMaxMin' )
. data ( scale . domain ( ) ) ;
axisMaxMin . enter ( ) . append ( 'g' ) . attr ( 'class' , 'axisMaxMin' ) . append ( 'text' ) ;
axisMaxMin . exit ( ) . remove ( ) ;
axisMaxMin
. attr ( 'transform' , function ( d , i ) {
return 'translate(0,' + scale . range ( ) [ i ] + ')'
} )
. select ( 'text' )
. attr ( 'dy' , '.32em' )
. attr ( 'dx' , - axis . tickPadding ( ) )
. attr ( 'text-anchor' , 'end' )
. text ( function ( d , i ) {
return axis . tickFormat ( ) ( d )
} )
}
break ;
}
axisLabel
. text ( function ( d ) { return d } ) ;
d3 . transition ( d3 . select ( this ) )
d3 . transition ( g )
. call ( axis ) ;
//check if max and min overlap other values, if so, hide the values that overlap
if ( showMaxMin && ( axis . orient ( ) === 'left' || axis . orient ( ) === 'right' ) ) {
g . selectAll ( 'g' ) // the g's wrapping each tick
. filter ( function ( d , i ) {
return scale ( d ) < 8 || scale ( d ) > scale . range ( ) [ 0 ] - 8 ; // 8 is assuming text height is 16
} )
. remove ( ) ;
}
//highlight zero line ... Maybe should not be an option and should just be in CSS?
if ( highlightZero )
d3 . select ( this )
. selectAll ( 'line.tick' )
g . selectAll ( 'line.tick' )
. filter ( function ( d ) { return ! parseFloat ( Math . round ( d * 100000 ) / 1000000 ) } ) //this is because sometimes the 0 tick is a very small fraction, TODO: think of cleaner technique
. classed ( 'zero' , true ) ;
@ -344,6 +395,12 @@ nv.models.axis = function() {
return chart ;
}
chart . showMaxMin = function ( _ ) {
if ( ! arguments . length ) return showMaxMin ;
showMaxMin = _ ;
return chart ;
}
chart . highlightZero = function ( _ ) {
if ( ! arguments . length ) return highlightZero ;
highlightZero = _ ;