Add phylotree component

src/scripts/component/tree/links/rightAngle.ts

+import { select, Selection } from "d3-selection";
+import { HierarchyPointLink } from "d3-hierarchy";
+import { PhyloTreeNode } from "../../../types";
+
+
+
+export default function () {
+
+  function rightAngle(
+    _selection: Selection<SVGGElement, HierarchyPointLink<PhyloTreeNode>[], any, any>
+  ) {
+    const classes = {
+      link: "link"
+    };
+    _selection.each(function (_data) {
+      const links = select(this)
+        .selectAll<SVGPathElement, HierarchyPointLink<PhyloTreeNode>>("." + classes.link)
+        .data(_data);
+
+      // ENTER
+      const linksE = links
+        .enter()
+        .append<SVGPathElement>("path")
+        .classed(classes.link, true);
+
+      // EXIT
+      links.exit().remove()
+
+      // UPDATE
+      const linksU = links.merge(linksE);
+
+      linksU
+      .attr("d", ({ source, target }) => {
+        return "M" + target.y + " " + target.x
+          + " H" + source.y
+          + " V" + source.x;
+      })
+      .attr("fill", "none")
+      .attr("stroke-width", 2)
+      .attr("stroke", "black");
+
+    });
+  }
+  return rightAngle;
+}
+

src/scripts/component/tree/node/generic.ts

+import { select, Selection } from "d3-selection";
+import { HierarchyPointNode } from "d3-hierarchy";
+import { PhyloTreeNode } from "../../../types";
+
+
+export default function () {
+  function genericNode(
+    _selection: Selection<SVGGElement, HierarchyPointNode<PhyloTreeNode>[], any, any>
+  ) {
+    const defaultR = 4;
+    const defaultFill = "#000";
+    const classes = {
+      node: "generic-node",
+      label: "label"
+    }
+
+    _selection.each(function (_data) {
+
+      const node = select(this)
+        .selectAll<SVGGElement, HierarchyPointNode<PhyloTreeNode>>("g." + classes.node)
+        .data(_data);
+
+      const nodeE = node
+        .enter()
+        .append("g")
+        .classed(classes.node, true)
+
+      // circle 
+      nodeE.append<SVGCircleElement>("circle")
+        .attr("r",
+          ({ data: { nodes } }) => (nodes && nodes.r) ? nodes.r : defaultR
+        )
+        .attr("fill",
+          ({ data: { nodes } }) => (nodes && nodes.fill) ? nodes.fill : defaultFill
+        )
+        .attr(
+          "stroke-width",
+          ({ data: { nodes } }) => (nodes && nodes.strokeWidth) ? nodes.strokeWidth : 10
+        )
+      // text
+      nodeE.append<SVGTextElement>("text")
+        .classed(classes.label, true)
+        .attr("x", ({ data: { nodes } }) => (nodes && nodes.r) ? (nodes.r) + 2 : defaultR + 2);
+
+      const nodeU = node.merge(nodeE)
+        .attr("transform", d => `translate(${d.y}, ${d.x})`)
+        .attr("fill-opacity", 1)
+        .attr("stroke-opacity", 1);
+
+      nodeU
+        .select("." + classes.label)
+        .text(d => d.data.name)
+
+        // Create a white background for text
+        // to make it better if text appear on
+        // tree elements
+        .clone(true)
+        .lower()
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-width", 3)
+        .attr("stroke", "white");
+
+      const nodeExit = node
+        .exit()
+        .remove();
+
+    });
+
+  }
+  return genericNode
+}
\ No newline at end of file

src/scripts/component/tree/phylotree.ts

+
+import { PhyloTreeNode } from "../../types";
+import { select, Selection } from "d3-selection";
+import { HierarchyPointNode } from "d3-hierarchy";
+import Node from "./node/generic";
+import Link from "./links/rightAngle";
+
+export default function () {
+  const nodeComponent = Node();
+  const linkComponent = Link();
+  function phylogram(
+    _selection: Selection<SVGGElement,
+      HierarchyPointNode<PhyloTreeNode>[], any, any>
+  ) {
+    const classes = {
+      root: "phylogram",
+      nodes: "nodes",
+      links: "links"
+    };
+    _selection.each(function (_data) {
+
+      const phylogram = select(this)
+        .selectAll<SVGGElement, HierarchyPointNode<PhyloTreeNode>>("g" + classes.root)
+        .data(_data);
+
+
+      // ENTER
+      const phylogramE = phylogram
+        .enter()
+        .append("g")
+        .classed(classes.root, true);
+
+      phylogramE.append("g").classed(classes.links, true)
+      phylogramE.append("g").classed(classes.nodes, true)
+
+
+      // UPDATE
+      const phylogramU = phylogram.merge(phylogramE);
+      // Nodes
+      phylogramU.select<SVGGElement>('.' + classes.nodes)
+        .datum(d => d.descendants().reverse())
+        .call(nodeComponent);
+      // Links
+      phylogramU.select<SVGGElement>("." + classes.links)
+        .datum(d => {
+          console.log(d.links());
+          return d.links()
+        })
+        .call(linkComponent);
+
+
+    })
+  }
+
+
+  return phylogram;
+}
\ No newline at end of file