D3 => NVD3.js在同一页面上更新其他图表

Question

我想完成与NVD3网站上发生的事情相同的事情

当您单击一个图表时,其他图表将更新.

看看网站的js,这就是魔术

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

我不明白第一行中的'updatesExamples'是什么.它是一个函数,一个变量.我在代码中的任何其他地方都找不到它.我已将代码复制到我的应用程序中,但我相信这个词是让它工作的关键.

有任何想法吗？

Answer 1

updatesExamples是一个事件命名空间.你可以添加你想要的任何字符串.这是d3.js的一个功能.请查看此处的文档.

多个事物可以触发事件,对于代码组织,您可能希望命名事件.例如,在NVD3中,如果您希望在单击图例时发生某些事情,则可以添加这样的事件处理程序

chart.legend.dispatch.on('legendClick.hi', function(e){
  console.log('legend was clicked', 'namespace:', 'hi');
});

这里,正在监听的事件是legendClick,名称空间是hi.您可以添加另一个具有不同命名空间的处理程序,该命名空间也会在单击图例时触发.

chart.legend.dispatch.on('legendClick.there', function(e){
  console.log('legend was clicked', 'namespace:', 'there');
});

命名空间是可选的,您可以将事件的名称传递给on方法.

chart.legend.dispatch.on('legendClick', function(e){
  console.log('legend was clicked', 'no namespace.');
});

你可以在这里的实时代码示例中使用它:http://nvd3.org/livecode/#codemirrorNav