nvd3 захват события клика на диаграмме с разбивкой по областям

Question

Я пытаюсь захватить событие click на диаграмме с разбивкой по nvd3. Я могу захватить всплывающие подсказки всплывающей подсказки. Я хочу зафиксировать событие click и получить информацию о клике. Пожалуйста помоги. PLUNKER_LINK

мой вариант график:

chart: { 
       type: 'stackedAreaChart', 
       height: 450, 
       x: function (d) { return d[0]; }, 
       y: function (d) { return d[1]; }, 
       showValues: true, 
       valueFormat: function (d) { return d3.format(',.4f')(d); }, 
       dispatch: { 
        tooltipShow: function (e) { console.log('! tooltip SHOW !') }, 
        tooltipHide: function (e) { console.log('! tooltip HIDE !') }, 
        beforeUpdate: function (e) { console.log('! before UPDATE !') }, 
        elementClick: function (e) { alert('clicked');} 

       } 
      } 
     }; 

Answer 1

Вам нужно обернуть dispatch блок в stacked блоке:

stacked: { 
    dispatch: { 
     tooltipShow: function (e) { console.log('! tooltip SHOW !') }, 
     tooltipHide: function (e) { console.log('! tooltip HIDE !') }, 
     beforeUpdate: function (e) { console.log('! before UPDATE !') }, 
     elementClick: function (e) { alert('clicked');} 
    } 
} 

Но, делая это по-прежнему не будет в состоянии получить elementClick , потому что слой сложенной диаграммы просто не отправит его. Вместо этого вы можете получить событие areaClick, но он запускается только при нажатии внутри уложенной области.

Поэтому я бы рекомендовал вам перехватить события отправки с «интерактивного» слоя. Просто сделайте это так:

chart: { 
    type: 'stackedAreaChart', 
    ... 
    interactiveLayer: { 
     dispatch: { 
      elementMousemove: function(e) { 
       console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue); 
      }, 
      elementClick: function(e) { 
       console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue); 
      } 
     } 
    } 
}