I have been trying for the past few weeks to get phylotree.min.js to render data as a radial phylogenetic circular tree, like here. So far I have tried writing it from scratch and everyone online says I should use phylotree. However, I cannot even initialize it properly without getting an error relating to the object not being callable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Circular Phylogenetic Tree</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phylotree.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f9f9f9;
height: 100vh;
}
#tree-container {
width: 800px;
height: 800px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="tree-container"></div>
<script>
const newick = `((Grandchild1_1,Grandchild1_2)Child1,(Grandchild2_1,(GreatGrandchild2_2_1,GreatGrandchild2_2_2)Grandchild2_2)Child2)Root;`;
const tree = new phylotree.phylotree(newick, {
type: "circular"
});
tree.render({
container: "#tree-container",
width: 800,
height: 800,
layout: "radial",
"left-right-spacing": "fit-to-size",
"top-bottom-spacing": "fit-to-size"
});
d3.selectAll(".node circle")
.attr("r", 5)
.style("fill", "#4285f4");
d3.selectAll(".branch")
.style("stroke", "#aaa")
.style("stroke-width", "1.5px");
d3.selectAll(".node text")
.style("font-size", "10px")
.style("fill", "#333");
</script>
</body>
</html>
However, I cannot even get the graph to render. I’ve revised the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Circular Phylogenetic Tree</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phylotree.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f9f9f9;
height: 100vh;
}
#tree-container {
width: 800px;
height: 800px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="tree-container"></div>
<script>
// Define the Newick string
const newick = `((Grandchild1_1,Grandchild1_2)Child1,(Grandchild2_1,(GreatGrandchild2_2_1,GreatGrandchild2_2_2)Grandchild2_2)Child2)Root;`;
// Ensure compatibility between phylotree.js and D3.js v7
// Replace extend with Object.assign if necessary
if (typeof ___namespace !== 'undefined' && typeof ___namespace.extend === 'undefined') {
___namespace.extend = Object.assign; // Polyfill for extend
}
// Initialize the phylogenetic tree
const tree = new phylotree.phylotree(newick, { type: "circular" });
// Render the tree in the specified container
tree.render({
container: "#tree-container", // Match container ID
layout: "radial",
width: 800,
height: 800,
});
// Style nodes and branches for better visibility
d3.selectAll(".node circle").attr("r", 5).style("fill", "black");
d3.selectAll(".branch").style("stroke", "black").style("stroke-width", "1px");
</script>
</body>
</html>
but I get the errors:
phylotree.js:4263 Uncaught TypeError: ___namespace.extend is not a function
at phylotree.js:4263:16
at phylotree.js:4:78
at phylotree.js:5:2
test_newick.html:40 Uncaught TypeError: phylotree.phylotree is not a constructor
at test_newick.html:40:22