How to zoom correctly in a multiple line-style graph in Observable?

Community Help
1

Hi,

I am trying to create an Observable multiline chart (this is my Observable notebook draft) but with the capability of zooming out what is plotted like in this another draft.

After that, if it’s possible, I would like to add a tooltip like the one that is used in Line Chart with Tooltip in the D3.js examples (sorry but I can’t put 3 links), removing the dot text displayed in the multiline chart draft given.

I tried several times to implement that without success. I’m quite newbie in D3.js.

Hope you can help me. Thanks for your time!

2

hi @elsebih I put together the Multi-Line Chart with zoom, I hope this can be helpful

4 Likes
3

Thanks for your time @radames! Working with it I use a clip to display it inside the margins (look at this draft). The problem is that I can pan the graph to y-values beside minimum and maximum, not seeing anything. Can I avoid this?

I prefer to not only zoom the x-axis, knowing that it is a possible solution.

4

you want to change the translateExtent in order to limit the panning

    .translateExtent([
      [margin.left, -Infinity],
      [width - margin.right, Infinity]
    ])
5

It works. Thanks a lot for your time and effort @radames !

1 Like