D3 => NVD3.js Updating other graphs on the same page

Question

I want to accomplish the same thing that's going on on the NVD3 site

When you click on one graph the other graphs updates.

Looking at the js for the site, this is what does the magic

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

I don't understand what the 'updatesExamples' in the first line is. Is it a function, a variable. I can't find it anywhere else in the code. I have duplicated the code into my app, but I believe that this word is the key to get it to work.

Any ideas?

Answer 1

updatesExamples is an event namespace. You could add whatever string you want. This is a feature of d3.js Check the docs here.

Multiple things can trigger events and for code organization you might want to namespace events. For example, in NVD3 if you want something to happen when a legend is clicked you can add an event handler like this

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

Here, the event being listened to, is legendClick and the namespace is hi. You can add another handler with a different namespace that will also be triggered when the legend is clicked.

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

Namespaces are optional you might just pass the name of the event to the on method.

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

You can play with this in the live code example here: http://nvd3.org/livecode/#codemirrorNav