按任意第三参数分组的嵌套树图名称及Web端生成方法咨询

这类图表的通用标准名称是带嵌套分组注释的树状图（聚类树/系统发育树），部分场景下也叫分组高亮聚类树、嵌套注释聚类树，生物信息领域常直接称带分类注释的进化树。
你提到的特征判断完全准确：它的核心结构是常规的聚类树/树状拓扑，额外叠加了一层完全独立于节点连接关系的分组标注层——分组依据可以是任意自定义的第三维度属性，不需要和聚类计算的结果绑定，且支持多层嵌套的色块/侧边栏来展示不同层级的分组归属。

按灵活度从高到低列可行方案：

• 基于D3.js自定义开发：D3内置了成熟的d3.cluster、d3.tree树布局API，你可以先完成基础树结构的节点、连线渲染，再根据自定义的嵌套分组数据，计算每个分组覆盖的叶子节点的坐标范围，直接绘制对应层级的背景色块即可。这个方案灵活度最高，分组样式、交互效果都可以完全自定义，适合有定制化需求的场景。
• 通用可视化库配置实现：
  • ECharts：可以用树图组件渲染基础聚类树结构，通过自定义系列（custom series）绘制嵌套分组的色块层，配置成本低，自带悬浮提示、缩放平移等通用交互，不需要从零实现基础能力。
  • Plotly.js：用内置的dendrogram组件渲染树结构后，通过添加shape图层的方式绘制分组色块，逻辑简单，适合快速出图的场景。
  • 垂直领域专用库：如果是做生物信息相关的可视化，可以直接用phylotree.js这类专门面向进化树渲染的库，原生支持多层嵌套分组注释、分类条的配置，不需要自己计算分组坐标，开发效率最高。
• 复用现成示例修改：Observable平台上有大量这类嵌套分组聚类树的公开实现，替换自己的数据源后就可以直接导出嵌入Web页面，不需要从零编写布局逻辑。

内容的提问来源于stack exchange，提问作者Scrandre