Open fraser-combe opened 4 months ago
Dear @fraser-combe,
The current version of phylotree
is dependent on version 6
. Do you happen to have a copy of the accompanying error you are encountering or which version of d3
you are using?
Best, Steven
I currently have installed d3 v 7.8.5. With the current code I have using the phyotree in a component I get no errors, just no svg displaying, here is my full code I currently call a dummy newick in my component from phyotree github.
<template>
<v-card style="overflow: auto; height: 700px; width: 900px">
<v-card-title class="justify-center">Phylogenetic Tree</v-card-title>
<v-card-text>
<svg id="phyloTree">
</svg>
</v-card-text>
<!-- Add other components such as download buttons etc here -->
</v-card>
</template>
<script>
import { phylotree as Phylotree } from 'phylotree'
// Import Phylotree CSS file.
import 'phylotree/dist/phylotree.css'
export default {
name: 'PhyloTree',
// props: {
// newick: {
// type: String,
// default: '',
// },
// },
data() {
return {
newick: `(((EELA:0.150276,CONGERA:0.213019):0.230956,(EELB:0.263487,CONGERB:0.202633):0.246917):0.094785,((CAVEFISH:0.451027,(GOLDFISH:0.340495,ZEBRAFISH:0.390163):0.220565):0.067778,((((((NSAM:0.008113,NARG:0.014065):0.052991,SPUN:0.061003,(SMIC:0.027806,SDIA:0.015298,SXAN:0.046873):0.046977):0.009822,(NAUR:0.081298,(SSPI:0.023876,STIE:0.013652):0.058179):0.091775):0.073346,(MVIO:0.012271,MBER:0.039798):0.178835):0.147992,((BFNKILLIFISH:0.317455,(ONIL:0.029217,XCAU:0.084388):0.201166):0.055908,THORNYHEAD:0.252481):0.061905):0.157214,LAMPFISH:0.717196,((SCABBARDA:0.189684,SCABBARDB:0.362015):0.282263,((VIPERFISH:0.318217,BLACKDRAGON:0.109912):0.123642,LOOSEJAW:0.3971):0.287152):0.140663):0.206729):0.222485,(COELACANTH:0.558103,((CLAWEDFROG:0.441842,SALAMANDER:0.299607):0.135307,((CHAMELEON:0.771665,((PIGEON:0.150909,CHICKEN:0.172733):0.082163,ZEBRAFINCH:0.099172):0.272338):0.014055,((BOVINE:0.167569,DOLPHIN:0.15745):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021);`,
}
},
mounted() {
this.$nextTick(() => {
this.renderPhyloTree()
})
},
methods: {
renderPhyloTree() {
const tree = new Phylotree(this.newick)
console.log('tree:', tree)
console.log('SVG Element:', document.getElementById('phyloTree'))
const height = 700
const width = 900
try {
tree.render({
height,
width,
'left-right-spacing': 'fit-to-size',
'top-bottom-spacing': 'fit-to-size',
container: '#phyloTree',
})
console.log(
'SVG content after render:',
document.getElementById('phyloTree').innerHTML
)
console.log('Tree rendered:', tree)
} catch (error) {
console.error('Error rendering phylotree:', error)
}
},
},
}`
and my console logs show the newick is being rendered, I may just be missing a final step
tree: Phylotree {newick_string: '(((EELA:0.150276,CONGERA:0.213019):0.230956,(EELB:….166557):0.367205):0.050892):0.114731):0.295021);', nodes: Node, links: Array(70), parsed_tags: Array(0), partitions: Array(0), …}
index.js?!./node_modules/vue-loader/lib/index.js?!./components/Phylotree.vue?vue&type=script&lang=js&:31 SVG Element: <svg id="phyloTree"></svg>
index.js?!./node_modules/vue-loader/lib/index.js?!./components/Phylotree.vue?vue&type=script&lang=js&:44 SVG content after render:
I am trying to create a phyo tree using this package in vue.js and having some issues displaying the phylotree svg. Are there specific d3 versions required? Or any other recommendations for phylotree in vue.js
thank you