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

Question

我有一个常规的柱形图,我希望能够点击一列并深入查看一组相关信息.此行为类似于highcharts demo的深入分析.有没有人能够在nvd3.js中实现这个？

Answer 1

您参考的Highcharts演示是浏览器市场份额的垂直条形图.当您单击其中一个浏览器时,将显示第二个垂直条形图,显示该浏览器的每个版本的市场份额.单击某个版本可返回上一个图表.

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