D3 => NVD3.js Updating other charts on one page

Question

I want to do the same as on the NVD3 website

When you click on one chart, other charts are updated.

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

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

I do not understand what "updatesExamples" is in the first line. Is this a function, a variable. I can not find it anywhere else in the code. I duplicated the code in my application, but I believe that this word is the key to getting it to work.

Any ideas?

Answer 1

updatesExamples is the event namespace. You can add any line you want. This is a feature of d3.js Check documents here .

Several events can also trigger events for organizing code that may be required for name-related 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'); }); 

It listens for the event, legendClick and the hi namespace. You can add another handler with a different namespace, which will also be launched when you click on a legend.

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

Namespaces are optional ; you can simply pass the event name to the on method.

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

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