إن في دي 3.شبيبة ربط تحوم / انقر فوق الأحداث إلى علامة زاكسيس <line>

Question

أنا باستخدام نفد 3.شبيبة مع المخططات الخطية والخطية مع التركيز لمشروع.هناك شرط لربط البيانات والأحداث إلى عناصر القراد زاكسيس.لقد كنت أحاول عبثا ربط الأحداث بسطر واحد يدويا من خلال وحدة التحكم.

// 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 ) للتأكد من عدم وجود طبقة تفاعلية تلتقط الأحداث وتقتلها.وقد تمكن أي شخص لربط الأحداث إلى زاكسيس أو لديهم تخمينات حول لماذا ما سبق لا يعمل?

Answer 1

يجب عليك تعيين خاصية أحداث المؤشر بشكل صريح على الخطوط حتى تستجيب لأحداث الماوس:

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

هناك قاعدة نمط كس إيقاف جميع أحداث المؤشر على مكونات المحور:

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

كان لي هيك من الوقت تتبع عليه ، على الرغم من-المفتش كروم دوم لا تظهر على أنها نمط "الموروثة" على القراد الفردية على الرغم من أنه يؤثر عليهم.