PhyloView 是一款基于 d3.js 的用于可视化系统进化树的插件(以下简称“本插件”),支持 tree 、radial 布局、 支持导入导出 Newick
、 NEXUS
、NeXML
、Phyloxml
等格式的树文件,且具备选中分支、编辑子树、添加子树、进化分支优化、树结构转换、字体切换、元数据展示、保存所选枝叶、重置树、将进化树图像导出为 SVG
、 PNG
等功能。
在页面上引入PhyloView。最新版支持 CommonJS
以及基础标签引入形式,对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。(建议下载 PhyloView 在本地引入)
<!-- 在线引入PhyloView -->
<script src="http://www.phyloview.cc/cdn/phyloview.main.js"></script>
示例展示
通过 CDN 可以快速使用 PhyloView 写出一个 tree
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>phyloview</title>
</head>
<body>
<div id="dendrogram"></div>
<script src="http://www.phyloview.cc/cdn/phyloview.main.js"></script>
<script>
new phyloview.InitTreeStructure("#dendrogram", { content: "" })
// 或者
phyloview.InitTreeLayoutStructure("#dendrogram", {
content: "",
layout: "tree"
})
</script>
</body>
</html>
通过 CDN 可以快速使用 PhyloView 写出一个 radial
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>phyloview</title>
</head>
<body>
<div id="dendrogram"></div>
<script src="http://www.phyloview.cc/cdn/phyloview.main.js"></script>
<script>
new phyloview.InitRadialStructure("#dendrogram", { content: "" })
// 或者
phyloview.InitTreeLayoutStructure("#dendrogram", {
content: ""
layout: "radial"
})
</script>
</body>
</html>
推荐使用 npm
来安装,享受生态圈和工具带来的便利,更好地和 webpack
配合使用,当然,我们也推荐使用 ES2015
。
import phyloview from "phyloview";
new phyloview.InitTreeStructure("#dendrogram", { content: "" })
// 或者
new phyloview.InitRadialStructure("#dendrogram", { content: "" })
// 或者
phyloview.InitTreeLayoutStructure("#dendrogram", {
content: ""
layout: "" // radial、tree
})
import { InitTreeStructure, InitRadialStructure, InitTreeLayoutStructure } from "phyloview";
new InitTreeStructure("#dendrogram", { content: "" })
// 或者
new InitRadialStructure("#dendrogram", { content: "" })
// 或者
InitTreeLayoutStructure("#dendrogram", {
content: ""
layout: "" // radial、tree
})
PhyloView
支持最新浏览器,比如 Chrome
,Edge
,Firefox
以及 Safari
。