向下鑽取NVD3.js製圖庫

Question

我有一個常規柱形圖，我希望能夠點擊一列並向下鑽取一組相關信息。這種行爲類似於高度圖demo進行深入分析。有沒有人能夠在nvd3.js中實現這一點？

Answer 1

您參考的Highcharts演示是瀏覽器marketshare的垂直條形圖。當您點擊其中一個瀏覽器時，會顯示第二個垂直條形圖，顯示該瀏覽器每個版本的市場份額。點擊一個版本會返回到上一個圖表。

nvd3模型支持使用d3的調度程序的點擊和懸停監聽器，您可以在這裏閱讀關於d3的github wiki的更多信息[1]。

如果您瀏覽historicalBar圖表的nvd3源代碼，您可以看到調度程序的設置位置[2]。

所以你要編寫一個函數，當'elementClick'事件被觸發時，這個函數被接受爲一個被點擊的系列參數。現在您知道點擊的系列了，您可以切換數據並重新繪製圖表。

我希望這可以幫助，它花了我一段時間來追蹤nvd3如何使用點擊和懸停監聽器。

這裏是nvd3的頭版正在使用的調度器的示例：

chart.stacked.dispatch.on('areaClick.updateExamples', function(e) { 
     setTimeout(function() { 
      mainExample.update(); 
      exampleOne.update(); 
      //exampleTwo.update(); 
      exampleThree.update(); 
     }, 100); 
     }) 

[1] https://github.com/mbostock/d3/wiki/Internals#events

[2] https://github.com/novus/nvd3/blob/master/src/models/historicalBar.js#L23