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

Question

我正在将 nvd3.js 与 line and line-with-focus charts 一起用于一个项目。需要将数据和事件绑定到 xAxis 刻度元素。我一直在徒劳地尝试通过控制台手动将事件绑定到一行。

// 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 检查器不会将它显示为单个刻度上的“继承”样式，即使它会影响它们。