Working with events

Events exposed by nvd3.js and d3.js are re-emitted from the directives as scope events ($scope.$emit). Events are re-emitted with the same names as the underlying framework with the addition on ‘.directive’. Using duplicate names overrides existing events.

If an event listener was already registered for the same type, the existing listener is removed before the new listener is added. To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as “click.foo” and “click.bar” From d3.js wiki

Event Example

To capture exposed events, add a listener for the event(s) of interest using scope $on method.

The directives will re-emit an event usingt the events original name, plus .directive on the end.

For example, all nvd3 tooltipShow events are re-emitted as tooltipShow.directive. Hovering over the chart will cause the tooltipShow event to fire.

$scope.$on('tooltipShow.directive', function(angularEvent, event){
    angularEvent.targetScope.$parent.event = event;
    angularEvent.targetScope.$parent.$digest();
});

<div ng-controller="ExampleCtrl">
	<nvd3-line-chart
    	data="exampleData"
        id="exampleId"
        interactive="true"
        xAxisTickFormat="xAxisTickFormatFunction()"
        showXAxis="true"
        showYAxis="true">
        	<svg></svg>
    </nvd3-line-chart>
    <div><b>Point Data</b>
        <div ng-repeat="point in event.point">
            <div ng-bind="point"></div>
        </div>
    </div>
</div>

Exposed Events by Model

Core * render_start * render_end

Chart

• Tooltip Show
• Tooltip Hide
• Before Update
• State Change
• Change State

Lines * Element Mouseover Tooltip * Element Mouseout Tooltip * Element Click Tooltip

Stacked * Area Click Toggle * Tooltip Show * Tooltip Hide

Interactive Layer * Element Mouseout * Element Mousemove

Discrete Bar * Element Mouseover Tooltip * Element Mouseout Tooltip

Multibar * Element Mouseover Tooltip * Element Mouseout Tooltip * Element Click

Pie * Element Mouseover Tooltip * Element Mouseout Tooltip

Scatter * Element Mouseover Tooltip * Element Mouseout Tooltip

Bullet * Element Mouseover Tooltip * Element Mouseout Tooltip

Legend * State Change Legend * Legend Click

Controls * Legend Click

Render Start

Render End

Tooltip Show

• Exposed Event - tooltipShow.directive

$scope.$on('tooltipShow.directive', function(angularEvent, event){
});

Tooltip Hide

• Exposed Event - tooltipHide.directive

$scope.$on('tooltipHide.directive', function(angularEvent, event){
});

Before Update

• Exposed Event - beforeUpdate.directive

$scope.$on('beforeUpdate.directive', function(angularEvent, event){
});

State Change

• Exposed Event - stateChange.directive

$scope.$on('stateChange.directive', function(angularEvent, event){
});

Change State

• Exposed Event - changeState.directive

$scope.$on('changeState.directive', function(angularEvent, event){
});

Element Mouseover Tooltip

• Exposed Event - elementMouseover.tooltip.directive

$scope.$on('elementMouseover.tooltip.directive', function(angularEvent, event){
});

Element Mouseout Tooltip

• Exposed Event - elementMouseout.tooltip.directive

$scope.$on('elementMouseout.tooltip.directive', function(angularEvent, event){
});

Element Click

• Exposed Event - elementClick.directive

$scope.$on('elementClick.directive', function(angularEvent, event){
});

Area Click Toggle

• Exposed Event - areaClick.toggle.directive

$scope.$on('areaClick.directive', function(angularEvent, event){
});

Element Mouseout

• Exposed Event - elementMouseout.directive

$scope.$on('elementMouseout.directive', function(angularEvent, event){
});

Element Mousemove

• Exposed Event - elementMousemove.directive

$scope.$on('elementMousemove.directive', function(angularEvent, event){
});

State Change Legend

• Exposed Event - stateChange.legend.directive

$scope.$on('stateChange.legend.directive', function(angularEvent, event){
});

Legend Click

• Exposed Event - legendClick.directive

$scope.$on('legendClick.directive', function(angularEvent, event){
});