NVD3.js bind hover/click events to the xAxis tick <line>

Question

I'm using nvd3.js with line and line-with-focus charts for a project. There is a requirement to bind data and events to the xAxis tick elements. I've been trying in vain to bind events to a single line manually through the console.

// try to bind to the first xAxis <line> in my line-with-focus chart
d3.select( 'div#problem-chart .nv-focus .nv-x .tick line' )
     .on( 'mouseover', function( e ){ 
                        console.log( e ); 
      } )

I've even set chart.interactive( false ) to make sure there is no interactive layer that captures events and kills them. Has anyone managed to bind events to the xAxis or have guesses on why the above is not working?

Answer 1

You have to explicitly set the pointer-events property on the lines so they will respond to mouse events:

  d3.selectAll('g.nv-axis line')
    .style("pointer-events", "visiblePainted")
    .on("mouseover", function(){
      d3.select(this).style("stroke", "red");
    });

There's a CSS style rule turning off all pointer events on the axis components:

.nvd3 .nv-axis {
    pointer-events: none;
}

I had a heck of a time tracking it down, though -- the Chrome DOM inspector doesn't show it as an "inherited" style on the individual ticks even though it affects them.