diff --git a/examples/mouse.html b/examples/mouse_click.html
similarity index 82%
rename from examples/mouse.html
rename to examples/mouse_click.html
index 74ccd21..e1d9c43 100755
--- a/examples/mouse.html
+++ b/examples/mouse_click.html
@@ -16,7 +16,11 @@
let options = {
renderLegend: false, usePanning: false,
axis: { y: { range: [0, 50] } },
- eventsCallbacks: { mouseMove: console.log }
+ zoomEvents: { mouse: {
+ zoom: { isActive: false },
+ pan: { isActive: false },
+ } },
+ eventsCallbacks: { mouseClick: console.log }
}
var pod = new LinePod(
document.getElementById('chart'),
diff --git a/src/index.ts b/src/index.ts
index a8552d0..edba9fd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -291,10 +291,12 @@ class LinePod extends ChartwerkPod {
}
getMouseObj(): MouseObj {
+
const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1];
const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale
const yValue = this.state.yScale.invert(eventY);
+ this.moveCrosshairLine(eventX, eventY);
const datapoints = this.findAndHighlightDatapoints(xValue, yValue);
@@ -309,20 +311,21 @@ class LinePod extends ChartwerkPod {
chartX: eventX,
chartWidth: this.width
};
+
}
override onMouseMove(): void {
const obj = this.getMouseObj();
- this.moveCrosshairLine(obj.x, obj.y);
+ const eventX = d3.mouse(this.chartContainer.node())[0];
+ const eventY = d3.mouse(this.chartContainer.node())[1];
+ this.moveCrosshairLine(eventX, eventY);
// TODO: is shift key pressed
// TODO: need to refactor this object
this.options.callbackMouseMove(obj);
}
- // TODO: add override
- onMouseClick(): void {
- const obj = this.getMouseObj();
- console.log(obj);
+ override onMouseClick(): void {
+ this.options.callbackMouseClick(this.getMouseObj());
}
findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] {