d3.layout.newick_parser is not a function

jakobtroidl commented 3 years ago

Hi,

when I run the this example, I get an error message like "d3.layout.newick_parser is not a function". This exact same code worked for me a couple of weeks ago? What should I do? Can anyone please point me in the right direction?

Best, Jakob

stephenshank commented 3 years ago

Dear @jakobtroidl,

Do you know which version of phylotree you are using? How are you installing phylotree as a dependency (NPM, a script tag)?

That syntax looks like it corresponds to version 0.x, but Phylotree recently underwent a 1.0.0 release, so I suspect a version mismatch could be the culprit.

If you can provide information about what version you are using and how you are importing/installing, it will help us to further troubleshoot.

Best, Stephen

jakobtroidl commented 3 years ago

Hi @stephenshank,

thank you for your quick answer. I am currently just referencing phylotree.js in my .html file like

<script src="https://veg.github.io/phylotree.js/phylotree.js"></script>

exactly as it is done in the tutorial. When it worked in my application, phylotree 1.0 was not released yet. Do you know how I have to adapt my code? I don't want to change my application to use npm etc...

Thank you so much for your help. Best, Jakob

stephenshank commented 3 years ago

Dear @jakobtroidl,

Please download: https://data.hyphy.org/web/issues/phylotree/v0-mwe.tar.gz

which is a minimal working example using phylotree version 0, inspired by the example you shared. Once uncompressed you will find three files... an index.html based on the link you provided, and bundled JavaScript/CSS from a previous version of phylotree (v0.1.9 to be specific) that were built locally.

The only adjustments made to index.html were to uniformly use // when sourcing dependencies (to avoid protocol mismatch), and sourcing the local version of phylotree.js provided. I suspect that since things have been in flux, the copy of the bundle that your code referenced changed at some point.

Please let me know if this is not sufficient for your purposes, or if you encounter any further issues.

Best, Stephen

jakobtroidl commented 3 years ago

Hi @stephenshank,

thanks so much for sharing. I had to modify the index.html slightly before it worked. After I downloaded the working working example, I changed the paths in the index.html file to this:

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <link href="phylotree.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="phylotree.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script>
</head>

<body>
  <svg id="tree_display" />

  <script>
    var example_tree = "(((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.397100):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.157450):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021)"
    // tree from Yokoyama et al http://www.ncbi.nlm.nih.gov/pubmed/18768804
    var tree = d3.layout.phylotree()
      // create a tree layout object
      .svg(d3.select("#tree_display"));
    // render to this SVG element
    tree(d3.layout.newick_parser(example_tree))
      // parse the Newick into a d3 hierarchy object with additional fields
      .layout();
    // layout and render the tree
  </script>

</body>

</html>

veg / phylotree.js

d3.layout.newick_parser is not a function #399