Floating Mouse

Community Help
1

Hi,

Apologies, I couldn’t think of anything better to call the problem I am seeing. It is a simple problem but I am new to observable and also JS which doesn’t help.

I had a play the other day and I want to be able to run the code on my own server. I have read this link https://observablehq.com/@observablehq/downloading-and-embedding-notebooks so I was able to down load one of the examples: https://observablehq.com/@d3/multi-line-chart.

The chart loads however I find that when the mouse activates the line charts it activates it about 1 inch above where the line actually is. Of course in the example online it is working, and I have not changed any code so I am wondering what could have gone wrong in-between. I am wondering whether anyone else has seen this, or is it only me?

When I embed just the cell and not the whole workbook, the chart works fine, however this is not sufficient for what I am trying to do.

Any help would be appreciated.

Kindest Regards,
Arjun

2

It could be that your CSS clashes with the CSS of the embedded notebook, have you checked if disabling it fixes the issue?

3

Hi Job,

Thanks for the reply, I appreciate it! No I literally have just chucked the downloaded code onto Apache, there is no other code. The only style-sheet is the one included: inspector.css. I deleted the css file and it didn’t seem to make much difference so it could be that it isn’t loading it in the first place?

Any other ideas?

Kr,
Arjun

4

I see it too! I just downloaded the notebook and see the same thing. In function moved(), the line const ym = y.invert(d3.event.layerY); is looking at the mouse event and finding the point in data-space that it corresponds to. When you view the notebook on observablehq.com, layerY is measuring relative to the top of the cell, but when you view the downloaded notebook, it’s measuring relative to the top of the whole page.

d3.mouse measures position relative to some container. So you can replace these two lines in the function moved

const ym = y.invert(d3.event.layerY);
const xm = x.invert(d3.event.layerX);

with these three lines:

const mouse = d3.mouse(svg.node())
const ym = y.invert(mouse[1]);
const xm = x.invert(mouse[0]);

Let me know if that works. I’ve suggested it as a change on the d3 notebook; it should work equally well on Observable and locally in the downloaded notebook. Good catch!

2 Likes
5

Thanks Tophtucker!!! I just got around to testing this and it works. Thanks again for your support I super appreciate the community when it comes to things like this!

Kr, Arjun.

2 Likes