phylotree.js
phylotree.js copied to clipboard
veg
custom information to display in branches
hello, we are working in evolutionary models and we have been exploring your fascinating library. Is it possible to add information to branches, and display it ? we would like to add different parameter values to each branch, as illustrated here (in two of the branches) of this publication figure:
; (link to publicaton: https://www.nature.com/articles/nature12027), but we need to do this for all branches. We have some experience in manipulating svg objects and d3.js Thank you in advance.
Dear @johaGL,
You are interested in adding text boxes, right? How big is your tree? (the issue would be dealing with overlaps for larger trees).
Best, Sergei
Thank you very much for your reply @spond . The tree can be big as ~100-150 leaves (bigger trees we think will be impractical for this kind of display we think), however we would like the textboxes to be hidden at each branch and only to display on click (on the branch).
Dear @johaGL,
Ah, OK. Which version of phylotree are you using? I'll mock up an example for you.
Best, Sergei
I apologize for my late reply, indeed we are trying to use phylotree version 1.0.0-alpha.22 and import it in our .js file via npm but we encounter some difficulties as we have all inside an existing Flask application, so for now we have only done very simple tests including the http tags directly into the html template. Please give us some time to confirm you the definitive phylotree version, we deeply appreciate your responsiveness. Thank you again, Joha.
Dear @johaGL,
Take a look at https://github.com/veg/phylotree.js/tree/master/examples/attribute-displays
You should be able to test it using yarn develop (as described in README)
Best, Sergei
Dear @spond , we are really grateful, and happy, your example is exactly what we need :
We will follow README instructions to import the library in our app and inspire from your code in this excellent example. Thank you !