javascript - NVD3.js bind hoverclick events to the xAxis tick <line> - Stack Overflow

admin管理员组

文章数量:1317909

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?

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?

• javascript
• d3.js
• nvd3.js

Share Improve this question Follow asked Feb 27, 2014 at 17:44 sudobangbangsudobangbang 25166 silver badges1515 bronze badges 4

• Did you check if you're actually selecting something? It looks like your selector should be something like div#problem-chart > .nv-focus > .nv-x > .tick > line. – Lars Kotthoff Commented Feb 27, 2014 at 18:11
• @LarsKotthoff: yes, i checked that. It is actually selecting something – sudobangbang Commented Feb 27, 2014 at 18:14
• @LarsKotthoff: it seems to be that sub elements of g.nv-linesWrap are capturing events and those events are not percolating to the g.nv-focus children. ugh – sudobangbang Commented Feb 27, 2014 at 19:06
• Hmm, I supposed you could select those elements and set pointer-events: none on them. – Lars Kotthoff Commented Feb 27, 2014 at 19:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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 ponents:

.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.

本文标签： javascriptNVD3js bind hoverclick events to the xAxis tick ltlinegtStack Overflow