diff --git a/src/index.html b/src/examples/genome-browser/index.html similarity index 55% rename from src/index.html rename to src/examples/genome-browser/index.html index d7ff50ecf79b64118727c0513a7c82f57d925dae..3a411025272b2ede306dad1be6e351a53299c2b9 100644 --- a/src/index.html +++ b/src/examples/genome-browser/index.html @@ -1,7 +1,6 @@ - - + @@ -10,7 +9,7 @@ - + \ No newline at end of file diff --git a/src/scripts/main-genome-browser.ts b/src/examples/genome-browser/main.ts similarity index 94% rename from src/scripts/main-genome-browser.ts rename to src/examples/genome-browser/main.ts index 013b8fa8f6e3a5bd66d016ee737de3afb0322be7..07fe997070f35b6b43764e1ef9911b0a157ba581 100644 --- a/src/scripts/main-genome-browser.ts +++ b/src/examples/genome-browser/main.ts @@ -1,7 +1,7 @@ -import { GeneData, GenomeBrowserData, GenomeBrowserState } from "./types"; +import { GeneData, GenomeBrowserData, GenomeBrowserState } from "../../scripts/types"; import { select, event } from "d3-selection"; -import GenomeBrowser from "./component/genome-browser"; -import genomeBrowserLayout from "./layout/genome-browser"; +import GenomeBrowser from "../../scripts/component/genome-browser"; +import genomeBrowserLayout from "../../scripts/layout/genome-browser"; const width = 1500; diff --git a/src/style/genome-browser.css b/src/examples/genome-browser/style.css similarity index 100% rename from src/style/genome-browser.css rename to src/examples/genome-browser/style.css diff --git a/src/examples/phylotree/index.html b/src/examples/phylotree/index.html new file mode 100644 index 0000000000000000000000000000000000000000..7644fa51af21b03f8fbf50f478fd03b803fa930a --- /dev/null +++ b/src/examples/phylotree/index.html @@ -0,0 +1,12 @@ + + + +
+ + +
+ + + + + \ No newline at end of file diff --git a/src/examples/phylotree/main.ts b/src/examples/phylotree/main.ts new file mode 100644 index 0000000000000000000000000000000000000000..1817f90642c10403e32d88fc5343b0b60d3856cf --- /dev/null +++ b/src/examples/phylotree/main.ts @@ -0,0 +1,122 @@ +import Phylotree from "../../scripts/layout/phylotree"; +import { tree, hierarchy, HierarchyPointNode } from "d3-hierarchy"; +import { RawPhyloTreeNode, PhyloTreeNode } from "../../scripts/types"; +import { select } from "d3-selection"; + +const treeLayout = tree(); +const data: RawPhyloTreeNode = { + "name": "Eve", + branchLength: 0, + "children": [ + { + "name": "Cain", + branchLength: 0.8, + }, + { + "name": "Seth", + branchLength: 0.6, + "children": [ + { + "name": "Enos", + branchLength: 0.3 + }, + { + "name": "Noam", + branchLength: 0.1 + } + ] + } + ] +}; +const root = hierarchy(data); +const myTree = treeLayout(root); +// myTree.eachBefore(n => console.log("d3 ", n.data.name, ' - ', n.x, ', ', n.y)) +// console.log(myTree); +// draw(myTree); +const width = 900; +const height = 400; +const size: [number, number] = [height - 10, width - 50]; +const phylotreeLayout = Phylotree() + // .nodeSize([50, 200]); + .size(size); +const phylotreeData = phylotreeLayout(data); +draw(phylotreeData); +console.log(phylotreeData.links()); + + +function draw(source: HierarchyPointNode) { + const phylotree = select("svg") + .attr("width", width) + .attr("height", height) + .append("g") + .attr("transform", "translate(" + 10 + ',0)') + .classed("phylotree", true); + + + const node = phylotree + .selectAll[]>("g.node") + .data(source.descendants().reverse()); + + + // ENTER + const nodeE = node + .enter() + .append("g") + .classed("node", true); + + nodeE.append("circle") + .attr("r", 2.5) + .attr("fill", d => d.children ? "#555" : "#999") + .attr("stroke-width", 10); + + nodeE.append("text") + .attr("dy", "0.31em") + .attr("x", 6) + // .attr("x",d => d.children ? -6 : 6) + // .attr("text-anchor", d => d.children ? "end" : "start") + .text(d => d.data.name) + .clone(true).lower() + .attr("stroke-linejoin", "round") + .attr("stroke-width", 3) + .attr("stroke", "white"); + + // Update + const nodeU = node + .merge(nodeE) + .attr("transform", d => { + console.log(d.data.name, '-', d.x); + return `translate(${d.y},${d.x})` + }) + .attr("fill-opacity", 1) + .attr("stroke-opacity", 1); + + + // Transition exiting nodes to the parent's new position. + const nodeExit = node + .exit() + .remove(); + + + // Update the links… + // const link = gLink.selectAll("path") + // .data(links, d => d.target.id); + + // // Enter any new links at the parent's previous position. + // const linkEnter = link.enter().append("path") + // .attr("d", d => { + // const o = { x: source.x0, y: source.y0 }; + // return diagonal({ source: o, target: o }); + // }); + + // // Transition links to their new position. + // link.merge(linkEnter).transition(transition) + // .attr("d", diagonal); + + // // Transition exiting nodes to the parent's new position. + // link.exit().transition(transition).remove() + // .attr("d", d => { + // const o = { x: source.x, y: source.y }; + // return diagonal({ source: o, target: o }); + // }); + +} \ No newline at end of file