d3.mouse

Husain — Wed, 05 Feb 2020 05:39:33 GMT

I am trying to get X,Y coordinates of mouse position using d3.mouse function

export class Visual implements IVisual { private host: IVisualHost; private svg: Selection<SVGElement>; private container: Selection<SVGElement>; constructor(options: VisualConstructorOptions) { this.svg = d3.select(options.element) .append('svg') this.container = this.svg.append("g") .classed('container', true) this.container .on("mousemove", function () { d3.select(".tooltip").remove() var mouse = d3.mouse(this.container) //I get following error with d3.mouse(parameter). I tried d3.mouse(this) as well //Argument of type 'SVGElement' is not assignable to parameter of type 'ContainerElement'. //Type 'SVGElement' is missing the following properties from type 'SVGGElement': transform, //getBBox, getCTM, getScreenCTM, and 2 more.

Re: d3.mouse

dm-p — Wed, 05 Feb 2020 07:24:51 GMT

Hi @Husain,

This is where the problem starts:

private container: Selection<SVGElement>;

In your constructor, you're correctly assigning the 'g' element, but TypeScript thinks it's a SVGElement due to your property declaration and gets upset when you try to call d3.mouse on it. This needs to be declared as a ContainerElement.

To make the code in your post work to that point, change the container declaration as follows:

private container: Selection<ContainerElement>;

Then, your d3.mouse function can work on this, which is scoped as the element you're calling the event function on. This line should now read as follows:

.on("mousemove", function () { d3.select(".tooltip").remove() var mouse = d3.mouse(this)

Your partial listing would now look as follows if you just want to copy/paste the whole thing:

export class Visual implements IVisual { private host: IVisualHost; private svg: Selection<SVGElement>; private container: Selection<ContainerElement>; /** Now has correct type */ constructor(options: VisualConstructorOptions) { this.svg = d3.select(options.element) .append('svg') this.container = this.svg.append("g") .classed('container', true) this.container .on("mousemove", function () { d3.select(".tooltip").remove() var mouse = d3.mouse(this) /** `this` is declared as the element (this.container) in the listener function */

This block of code will now compile correctly.

Good luck!

Daniel

If my post solves your challenge, then please consider accepting as a solution to help other forum members find the answer more quickly 🙂

topic d3.mouse in Developer

d3.mouse

Re: d3.mouse