使用 NVD3.js 图表库向下钻取答案

【问题标题】：Drilldown with NVD3.js charting library使用 NVD3.js 图表库向下钻取
【发布时间】：2013-01-08 22:29:49
【问题描述】：

我有一个常规柱形图，我希望能够单击一个列并向下钻取一组相关信息。此行为类似于 highcharts demo 进行向下钻取的方式。有没有人能够在 nvd3.js 中实现这个？

【问题讨论】：

标签： nvd3.js

【解决方案1】：

您引用的 Highcharts 演示是浏览器市场份额的垂直条形图。当您单击其中一个浏览器时，将显示第二个垂直条形图，显示该浏览器每个版本的市场份额。单击一个版本会返回到上一个图表。

nvd3 模型支持使用 d3 调度程序的单击和悬停侦听器，您可以在此处阅读 d3 的 github wiki [1] 上的更多信息。

如果您浏览历史条形图的 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

【讨论】：

如果使用MultiBarChart()，使用chart.multibar.dispatch.on('elementClick', function(e) {...})，如果使用DiscreteBarChart()，使用chart.discretebar.dispatch.on('elementClick', function(e) {...})