NVD3.js将悬停/单击事件绑定到xAxis tick <line>

Question

我正在使用nvd3.js与项目的线和焦点图表.需要将数据和事件绑定到xAxis tick元素.我一直试图通过控制台手动将事件绑定到一行.

// 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 ); 
      } )

我甚chart.interactive( false )至设置确保没有可以捕获事件并杀死事件的交互层.有没有人设法将事件绑定到xAxis或猜测为什么上述不起作用？

Answer 1

您必须在行上显式设置pointer-events属性,以便它们响应鼠标事件:

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

有一个CSS样式规则关闭轴组件上的所有指针事件:

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

不过,我有一段时间跟踪它 - Chrome DOM检查员并没有将它显示为单个刻度上的"继承"样式,即使它影响了它们.