Added custom events click, hover and focus

[chaosmail]

Hi n3-chart team,

I added 3 custom events to the chart directive. Due to the glass g-element displayed for the scrubber tooltip, I was not able to implement click and hover in scrubber mode.

• click: the mouse clicks on a dot or column (tooltip modes: axes, none)
• hover: the mouse hovers over a dot or column (tooltip modes: axes, none)
• focus: an event that triggers the scrubber focus (tooltip mode: scrubber)

Every event handler is called with the data element d and the position i in the array of values of a series.

I used this syntax for now, let me know if we can find something better:

<linechart data="data" options="options" click="onClick" hover="onHover" focus="onFocus"></linechart>

$scope.onClick = function(d, i){ ... };
$scope.onHover = function(d, i){ ... };
$scope.onFocus = function(d, i){ ... };

Here is an example for click and hover: http://plnkr.co/edit/PTxVo3qKEnooK1PcsXMX

Here is an example for focus: http://plnkr.co/edit/vUOa1v4UFRlbPZINCZ6X

Best,
Christoph

[lorem--ipsum]

Unfortunately, conosole is not well-supported. Let's use console instead, if you don't mind :-)

[lorem--ipsum]

Very good PR, thank you for your contribution.

[chaosmail]

d3.events are very nice, clean and robust for dispatching (a lot of) events, maybe the initialHandler can be replaced with d3 events at one point.

[chaosmail]

The glass layer somehow blocks the click events, so that the dots beneath don't get triggered. There is for sure also an easy way to propagate the click event through this layer - but I haven't looked into this yet.

[chaosmail]

Yeah, and the point about the scrubber mode sounds good, let me add a third parameter to the callback of the focus event

[chaosmail]

what do you think about for sending an array containing the inverted x and y positions from the mouse cursor?

xInvert = axes.xScale.invert(x)
yInvert = axes.yScale.invert(y)

dispatch.focus(v, series.values.indexOf(v), [xInvert, yInvert])

[chaosmail]

I updated the demo, actually this additional value can be very useful too. http://plnkr.co/edit/vUOa1v4UFRlbPZINCZ6X?p=preview

[chaosmail]

Fixes #199
Fixes #211

[lorem--ipsum]

🍗

[chaosmail]

Seems like the linked issues #199 and #211 are not automatically closed

[dorlandode]

Is there a reason the click event an hover events only work on tooltip mode axes and none? I was hoping it work on scrubber as well.

[chaosmail]

Hi @dorlandode
the reason for this is how the scrubber tooltip works (it generates a transparent rectangle in front of all elements) which makes it hard to enable these events in scrubber mode.
However, we are actively developing version 2 (a complete rewrite in TypeScript) where this problem will be solved - and all events will be available for all tooltips.
Best,
Christoph

[dorlandode]

awesome, thanks for the update. What is the ETA on version 2?