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

Question

我正在使用带有line and line-with-focus charts的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检查员并没有将它显示为单个刻度上的“继承”样式，即使它会影响它们。