@ -11,10 +11,16 @@ nv.interactiveGuideline = function() {
//Public settings
//Public settings
var width = null
var width = null
, height = null
, height = null
//Please pass in the bounding chart's top and left margins
//This is important for calculating the correct mouseX/Y positions.
, margin = { left : 0 , top : 0 }
, xScale = d3 . scale . linear ( )
, xScale = d3 . scale . linear ( )
, yScale = d3 . scale . linear ( )
, yScale = d3 . scale . linear ( )
, dispatch = d3 . dispatch ( 'elementMousemove' , 'elementMouseout' )
, dispatch = d3 . dispatch ( 'elementMousemove' , 'elementMouseout' )
, showGuideLine = true
, showGuideLine = true
, svgContainer = null
//Must pass in the bounding chart's <svg> container.
//The mousemove event is attached to this container.
;
;
//Private variables
//Private variables
@ -23,17 +29,9 @@ nv.interactiveGuideline = function() {
;
;
function findFirstSVGParent ( Elem ) {
while ( Elem . tagName . match ( /^svg$/i ) === null ) {
Elem = Elem . parentNode ;
}
return Elem ;
}
function layer ( selection ) {
function layer ( selection ) {
selection . each ( function ( data ) {
selection . each ( function ( data ) {
var container = d3 . select ( this ) ;
var container = d3 . select ( this ) ;
var offsetParent = findFirstSVGParent ( this ) ;
var availableWidth = ( width || 960 ) , availableHeight = ( height || 400 ) ;
var availableWidth = ( width || 960 ) , availableHeight = ( height || 400 ) ;
@ -42,14 +40,13 @@ nv.interactiveGuideline = function() {
. append ( "g" ) . attr ( "class" , " nv-wrap nv-interactiveLineLayer" ) ;
. append ( "g" ) . attr ( "class" , " nv-wrap nv-interactiveLineLayer" ) ;
wrapEnter . append ( "g" ) . attr ( "class" , "nv-interactiveGuideLine" ) ;
wrapEnter . append ( "g" ) . attr ( "class" , "nv-interactiveGuideLine" ) . style ( "pointer-events" , "none" ) ;
wrapEnter . append ( "rect" ) . attr ( "class" , "nv-mouseMoveLayer" ) ;
if ( ! svgContainer ) {
return ;
}
wrap . select ( ".nv-mouseMoveLayer" )
svgContainer
. attr ( "width" , availableWidth )
. attr ( "height" , availableHeight )
. attr ( "opacity" , 0 )
. on ( "mousemove" , function ( ) {
. on ( "mousemove" , function ( ) {
var d3mouse = d3 . mouse ( this ) ;
var d3mouse = d3 . mouse ( this ) ;
var mouseX = d3mouse [ 0 ] ;
var mouseX = d3mouse [ 0 ] ;
@ -67,6 +64,17 @@ nv.interactiveGuideline = function() {
mouseY = d3 . event . offsetY ;
mouseY = d3 . event . offsetY ;
}
}
mouseX -= margin . left ;
mouseY -= margin . top ;
if ( mouseX < 0 || mouseY < 0
|| mouseX > availableWidth || mouseY > availableHeight ) {
dispatch . elementMouseout ( {
mouseX : mouseX ,
mouseY : mouseY
} ) ;
return ;
}
var pointXValue = xScale . invert ( mouseX ) ;
var pointXValue = xScale . invert ( mouseX ) ;
dispatch . elementMousemove ( {
dispatch . elementMousemove ( {
mouseX : mouseX ,
mouseX : mouseX ,
@ -99,6 +107,10 @@ nv.interactiveGuideline = function() {
}
}
}
}
}
}
mouseX -= margin . left ;
mouseY -= margin . top ;
dispatch . elementMouseout ( {
dispatch . elementMouseout ( {
mouseX : mouseX ,
mouseX : mouseX ,
mouseY : mouseY
mouseY : mouseY
@ -133,6 +145,13 @@ nv.interactiveGuideline = function() {
layer . dispatch = dispatch ;
layer . dispatch = dispatch ;
layer . tooltip = tooltip ;
layer . tooltip = tooltip ;
layer . margin = function ( _ ) {
if ( ! arguments . length ) return margin ;
margin . top = typeof _ . top != 'undefined' ? _ . top : margin . top ;
margin . left = typeof _ . left != 'undefined' ? _ . left : margin . left ;
return layer ;
} ;
layer . width = function ( _ ) {
layer . width = function ( _ ) {
if ( ! arguments . length ) return width ;
if ( ! arguments . length ) return width ;
width = _ ;
width = _ ;
@ -157,6 +176,12 @@ nv.interactiveGuideline = function() {
return layer ;
return layer ;
} ;
} ;
layer . svgContainer = function ( _ ) {
if ( ! arguments . length ) return svgContainer ;
svgContainer = _ ;
return layer ;
} ;
return layer ;
return layer ;
} ;
} ;