我正在使用带有 line and line-with-focus charts 的 nvd3.js对于一个项目。需要将数据和事件绑定(bind)到 xAxis 刻度元素。我一直在徒劳地尝试通过控制台手动将事件绑定(bind)到一行。
// 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 )
以确保没有捕获事件并杀死它们的交互层。有没有人设法将事件绑定(bind)到 xAxis 或猜测为什么上述方法不起作用?
最佳答案
您必须在行上显式设置 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 检查器不会将它显示为单个刻度上的“继承”样式,即使它会影响它们。
关于javascript - NVD3.js 将悬停/单击事件绑定(bind)到 xAxis 刻度 <line>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22076255/