# misaligned d3 zoom **URL:** \ **Category:** Help\ **Created:** [January 25, 2024, 11:39pm UTC](https://talk.observablehq.com/t/misaligned-d3-zoom/8728 "2024-01-25T23:39:10Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![oscar6echo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oscar6echo/32/647_2.png) [@oscar6echo](https://talk.observablehq.com/u/oscar6echo)\ **Post date:** [January 25, 2024, 11:39pm UTC](https://talk.observablehq.com/t/misaligned-d3-zoom/8728/1 "2024-01-25T23:39:10Z")
I wrote the question and context in this issue [Panning and zooming · Issue #1590 · observablehq/plot · GitHub](https://github.com/observablehq/plot/issues/1590#issuecomment-1909021020) In 2 words: I have a d3 zoom working fine a in notebook, and partially fine in a web page (on on y axis, but misaligned on x axis) and it is the same code, and there is not interfering css, I think. Any idea why ?? ---
**Author:** ![oscar6echo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oscar6echo/32/647_2.png) [@oscar6echo](https://talk.observablehq.com/u/oscar6echo)\ **Post date:** [January 26, 2024, 10:19pm UTC](https://talk.observablehq.com/t/misaligned-d3-zoom/8728/2 "2024-01-26T22:19:04Z")
In case someone want to compare: - The working notebook is: [Plot: Attempts on Zoom / oscar6echo | Observable](https://observablehq.com/d/98fa0c34fb79cfae) - The non working equivalent standalone web page is [GitHub - oscar6echo/proto-plot](https://github.com/oscar6echo/proto-plot) To be clear, here is the problem on the standalone page: ![misaligned-zoom](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/27bfd255cd8597d0f42e400ae540a261a752585b.gif) But all works as expected in the notebook: ![misaligned-zoom-ok](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a9aa946e3530b221ac67e6986c7056ccad310b4b.gif) I cannot spot the difference in code… ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [January 28, 2024, 2:01pm UTC](https://talk.observablehq.com/t/misaligned-d3-zoom/8728/3 "2024-01-28T14:01:44Z")
The issue, as you seem to have figured out, is with the legend. If you remove the legend, it should work fine. I think the easiest solution is to remove the legend and then recreate it separately in another DIV. The reason the legend causes these problems is because it creates a misalignment between the pointer position in the containing DIV (where the zoom is called from) and the chart (where the zoom is applied). That’s the standard way to do things but it’s important to have that alignment. Removing the legend solves the problem, since that’s what causing the misalignment in the first place. It’s not completely clear to me why moving the legend below the chart doesn’t solve the problem in your webpage but it seems to be related to how the container is contained. In your webpage, your container is ```
``` which spans the whole page. In the notebook, the container is an Observable output cell, which has all kinds of styles applied to it. For example, it’s constrained to lie within a DIV of class `"relative notebook"` whose width is further constrained. I noticed that if I set your `plot-3` to have a width that agrees with the width as specified by your `Plot` command, then things seem to work much better in the horizontal direction. They’re still a bit off in the vertical direction, though. Perhaps, you could fiddle with that a bit further, if you don’t like the idea of creating the legend separately. ---
**Author:** ![oscar6echo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oscar6echo/32/647_2.png) [@oscar6echo](https://talk.observablehq.com/u/oscar6echo)\ **Post date:** [January 29, 2024, 9:07am UTC](https://talk.observablehq.com/t/misaligned-d3-zoom/8728/4 "2024-01-29T09:07:24Z")
@mcmcclur thx a lot for taking the time to look into it. This has helped me narrow down the issue further. Much appreciated. Indeed it is the legend which disaligns the zoom, more precisely the wrapper `figure` element generated by plot() if there is a `title`, `subtitle`, `legend`, `caption` option (Cf. [Plots | Observable Plot](https://observablehq.com/plot/features/plots#other-options)). d3.zoom in general (for lack a better understanding) does always not behave as expected in cases where there is more than a single child element to the div on which it is called. I followed your advice and manage the legend separately, and updated the notebook and standalone page. Now all works fine. It is still puzzling to me that stacking elements vertically ends up misaligning the zoom horizontally (!) but never mind. EDIT: A disciplined way to make sure only the chart is rendered is to use option figure=false. It will overrides title, subtitle, caption, legend.