D3.layout module import woes

Community Help
1

Hi all,

Forgive the potentially naive question…

I’m trying to import a module that globs on functions to d3.layout, but despite using the suggested trick here, the functions aren’t being globbed on. Any tips?

Notebook is https://beta.observablehq.com/@sdwfrost/displaying-phylogenetic-trees-with-phylotree-js

2

If you don’t specify a version range with your require, you’ll get the latest version of the d3 which is 4.13.0 (and very soon 5.0.0!). The phylotree module appears to require D3 3.x, so try this:

d3 = {
  const d3 = window.d3 = await require('d3@3');
  await require('phylotree@0.1').catch(() => {});
  return d3;
}

(I also removed the use of wrzd.in since that doesn’t look necessary for the phylotree module, and it currently appears down.)

3

Dear @mbostock

Thanks! Much appreciated. Almost working now - probably an issue with phylotree

https://beta.observablehq.com/@sdwfrost/displaying-phylogenetic-trees-with-phylotree-js/3

4

Looks like you need phylotree.css, too:

html`<link rel=stylesheet href='https://unpkg.com/phylotree@0.1.6/phylotree.css'>`

The other thing is that your notebook does a lot of mutation. Rather than declaring an SVG in one cell, and then mutating it in another cell, it’s better to define the SVG fully-formed in a single cell, like so:

{
  const svg = d3.select(DOM.svg(width, height));
  
  d3.layout.phylotree()
      .options({
        'left-right-spacing': 'fit-to-size', // fit to given size top-to-bottom
        'top-bottom-spacing': 'fit-to-size', // fit to given size left-to-right
        'selectable': false, // make nodes and branches not selectable
        'collapsible': false, // turn off the menu on internal nodes
        'transitions' : false // turn off animations
      })
      .svg(svg)
      .size([height, width])
    (d3.layout.newick_parser(tree))
      .layout();
  
  return svg.node();
}

That way you don’t have to select the SVG node through the DOM, and Observable will know the height of the cell because the SVG will be fully-formed in one go, rather than mutated across cells.

Here’s a working fork of your notebook:

https://beta.observablehq.com/@mbostock/displaying-phylogenetic-trees-with-phylotree-js