Commit 53061245 authored by Remi  PLANEL's avatar Remi PLANEL

Add phylotree component

parent bc587acc
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;
}
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
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment