Drilldown with NVD3.js charting library

Question

I have a regular column chart and I would like to be able to click on a column and drilldown to a set of related information. This behavior is similar to how highcharts demo does drilldown. Has anyone been able to implement this in nvd3.js?

Answer 1

The Highcharts demo you reference is a vertical bar chart of browser marketshare. When you click on one of the browsers a second vertical bar chart is displayed showing marketshare of each version of that browser. Clicking a version returns you to the previous chart.

nvd3 models support click and hover listeners using d3's dispatcher that you can read more about on d3's github wiki here [1].

If you browse the nvd3 source of the historicalBar chart you can see where the dispatcher is set [2].

So you are going to write a function that is called when the 'elementClick' event is fired that accepts as a parameter the series that is being clicked. now that you know the series that is clicked, you can switch the data and have the chart redrawn.

I hope this helps, it took me a while to track down how nvd3 uses click and hover listeners.

here is an example of the dispatcher being used on the front page of 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