Does phylotree use a specific version of d3

[fraser-combe]

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

[stevenweaver]

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

[fraser-combe]

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: