JavaScript is required

tree-层级距离&节点距离

基于距离的树 - 分支长度代表遗传距离

带有遗传距离的系统发育树

功能概述

本示例可视化物种之间的进化关系,分支长度代表遗传距离或自分化以来的时间。节点代表物种,连接节点之间的距离显示它们的亲缘关系。常用于生物学和古生物学。

核心特性实现

基于距离的布局

const createPhylogeneticTree = (speciesData: Species[]) => {
    const nodes = speciesData.map(species => ({
        id: species.name,
        text: species.name,
        data: {
            geneticDistance: species.distanceFromRoot,
            divergenceTime: species.divergenceTime
        }
    }));

    // 根据遗传距离定位节点
    nodes.forEach(node => {
        node.x = node.data.geneticDistance * scale;
        // Y 位置由分支分类算法确定
    });

    return { nodes, lines };
};

分支长度表示

const lines = phylogeneticData.map(branch => {
    const length = branch.geneticDistance * scale;

    return {
        from: branch.ancestor,
        to: branch.descendant,
        text: `${branch.geneticDistance.toFixed(2)} substitutions`,
        // 连线长度与遗传距离成比例
    };
});

分支群高亮

const highlightClade = (cladeRoot: string) => {
    const cladeMembers = getCladeMembers(cladeRoot);
    cladeMembers.forEach(member => {
        graphInstance.updateNode(member, {
            color: '#ff5722',
            borderWidth: 2
        });
    });
};

创意使用场景

进化生物学:教授系统发育关系。

流行病学:追踪病毒变异和传播。

语言学:显示具有时间深度的语言家族树。

家谱学:具有代际距离的家族树。

功能进化:软件功能的谱系和进化。