Rescale tree inside its svg container

[anaome]

Hi there,

I am trying to display gene context metadata right to the nodes. For this, I adapted the leaf metadata example with this nice D3 snippet (https://observablehq.com/@tgotwig/taxonomic-arrows-with-tooltips). For a better rendering, I would like to restrict the tree to say 50% of the SVG container. Is there any trick to achieve that ? I am currently using version 1.0.0-alpha.14

Best !

[stephenshank]

Dear @anaome,

Thanks for an interesting use case! In terms of a trick, you could simply multiply the width of the svg after phylotree has finished rendering with a setTimeout... assuming the variable width was passed into phylotree's render options:

setTimeout(() => d3.select('#tree_display').select('svg').attr('width', 2*width), 1000)

This worked for me on the hello world example.

If we wanted to do this more cleanly, I'm thinking we could add a feature that could be called innerWidth. This would default to width when it is not specified. If it is specified, the SVG will be sized to the given width... but the phylotree tree contained within will be sized to the innerWidth to leave room for other graphical elements.

I'll leave this open for some further discussion, do let us know your thoughts.

Best, Stephen