NVD3.JS Bind Hover / Click События к оси X Tick

Question

Я использую nvd3.js с Линия и линейные диаграммы Focus дляпроект.Существует требование привязать данные и события к элементам клещей 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

Вы должны явно установить свойство указателя-событий на линии, чтобы они ответили на события мыши:

  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 не показывает его как «унаследованный» стиль на отдельных клещах, даже если это влияет на них.