问使用NVD3.js图表库进行深入分析

EN

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

nvd3模型支持使用d3的调度程序的点击和悬停监听器，你可以在d3的github wiki上阅读更多信息。

如果您浏览historicalBar图表的nvd3源代码，您可以看到dispatcher设置在哪里2。

因此，您将编写一个函数，该函数在触发'elementClick‘事件时调用，该函数接受被单击的序列作为参数。现在您知道了所单击的系列，您可以切换数据并重新绘制图表。

我希望这能有所帮助，我花了一段时间来追踪nvd3是如何使用点击和悬停监听器的。

以下是在nvd3首页使用的调度程序的示例：

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

1

2