nvd3捕獲堆棧面積圖上的單擊事件

Question

我正試圖捕獲nvd3堆棧面積圖上的單擊事件。我能夠捕捉工具提示顯示工具提示隱藏事件。我想捕獲點擊事件並獲取點擊點信息。請幫忙。 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); 
      } 
     } 
    } 
}