Commit 9213df31 authored by Remi  PLANEL's avatar Remi PLANEL

Update the example

parent 579566ca
import PhylogramLayout from "../../scripts/layout/phylogram";
import CladogramLayout from "../../scripts/layout/cladogram";
import { RawPhyloTreeNode, PhyloTreeNode } from "../../scripts/types";
import { RawPhyloTreeNode, } from "../../scripts/types";
import { select } from "d3-selection";
import Phylotree from "../../scripts/component/tree/phylotree";
import { cluster, hierarchy, HierarchyNode } from "d3-hierarchy";
import { cluster, hierarchy } from "d3-hierarchy";
import { defaultSeparation } from "../../scripts/layout/phylotree";
// CSS
import '../../styles/phylotree.css';
// Code
const phylotreeComponent = Phylotree();
const data: RawPhyloTreeNode = {
"name": "Root",
"name": "",
branchLength: 0,
nodes: { r: 10 },
node: { r: 0 },
"children": [
{
"name": "Level-1-0",
branchLength: 0.9,
nodes: {
node: {
fill: "blue"
}
},
{
"name": "Level-1-1",
branchLength: 0.4,
nodes: {
node: {
r: 8,
fill: "red"
},
link: {
strokeColor: "black"
},
"children": [
{
"name": "Level-2-0",
branchLength: 1.2
},
{
"name": "Level-2-1",
"name": "0123456dddddddddddddddddddddddddd789",
branchLength: 1.8,
nodes: {
node: {
fill: "darkgreen",
r: 5
r: 30
}
}
]
......@@ -44,8 +52,8 @@ const data: RawPhyloTreeNode = {
]
};
const marginLeft =
(data.nodes && data.nodes.r)
? data.nodes.r
(data.node && data.node.r)
? data.node.r
: 4;
const width = 1000;
const height = 200;
......@@ -55,19 +63,20 @@ const size: [number, number] = [height, width - marginLeft];
const isPhylogram = true;
const phylotreeData = (isPhylogram)
? PhylogramLayout()
// .nodeSize([40, width - marginLeft])
.size(size)(data)
: cluster()
// .nodeSize([40, width - marginLeft])
.size(size)(data)
: cluster<RawPhyloTreeNode>()
.separation(defaultSeparation)
.size(size)(hierarchy(data))
console.log(phylotreeData)
select("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.classed("phylotree", true)
// .attr("transform", `translate(${marginLeft},0)`)
.datum([phylotreeData])
.call(phylotreeComponent);
.link {
fill: none;
}
\ 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