figtree.js icon indicating copy to clipboard operation
figtree.js copied to clipboard

Zooming function

Open Georgva opened this issue 5 years ago • 3 comments

Hi there,

first of all, this is a great library!

I wanted to know if there is a possibility to provide a zooming function? I would like to use your library for the creation of trees for single cells. Since there are always a lot of them but I would like to see them without being too small/ colliding, so zooming and perhaps a dragging function would be great!

Since I am new to this topic I don't know how fast such a thing is implemented, still I would be glad to hear from you

Georgva avatar Sep 24 '20 06:09 Georgva

I'm happy you've found it useful.

I don't have much experience with d3.zoom and drag, but I had hoped that it would be relatively straightforward to add d3 zoom to a figure. I haven't been able to get it working, but I'm not sure yet if that's a problem with my d3 zoom code or indicative of a conflict somewhere deeper. I'd like to take another look when I get chance, but I'm not sure when that will be.

In the meantime, the is a 'rectangularZoomedLayout' that can take a tree node and returns a layout function that only displays the child clades. I have used it to zoom in on clades of big trees before. It might meet your needs. There's an example on how it works here: https://observablehq.com/@jtmccr1/zoom-layout-example.

jtmccr1 avatar Sep 24 '20 13:09 jtmccr1

Wow, thank you so much!

I am writing at my bachelor thesis and dont have much time left ;)

But maybe I have the time to include it. Thanks!

Georgva avatar Sep 26 '20 08:09 Georgva

For Zooming/Scrolling on a webpage the simple solution is to increase the vertical dimensions of the tree inside a

with a constrained size and scrollbars.

rambaut avatar Sep 26 '20 09:09 rambaut