在JS或画布中的分类图，生命之树，分支学，分类学？

Question

好人 - 我需要一些帮助才能找到创建交互式分支图或系统发育树的方法（是的，我已阅读所有相关帖子，但找不到我想要的内容）。问题是，我需要节点可以命名。一个例子就是这个

我发现的大多数脚本都是applet，flash，或者根本就没有显示节点分类，即在这个例子中它会跳过“feliformia”。这对我来说没用，因为我最终会吃肉食 - 匿名节点 - 匿名节点 - 匿名节点 - 老虎，这并不好。

理论上，这棵树将覆盖所有生命，因此它可以变得相当大，并从数据库中获取英语和拉丁语的链接和名称。

所以：没有闪光，没有小程序。它必须是水平的，没有超级树（圆形）。 我已经完成了这个http://bioinfo.unice.fr/biodiv/Tree_editors.html 但它们中的大多数似乎都是旧的，没有显示子节点级别，小程序或太复杂的方式。

我想这对canvas / jQuery来说是一个令人愉快的工作..？有可能，有人在我之前到达那里？

任何指针都非常赞赏。

注意：如果有人愿意做这样的项目，我很乐意提供帮助，即使这对我的项目没有好处。这种类型的分类并不像看起来那么简单，我很高兴看到这种情况发生。

修改： 一年过去了;我仍然认为这是一个非常有趣的问题。我已经离开了技术世界的一个咒语;所以，如果有人找到了一个看起来很有希望进行大型项目的东西......我全都听见了。

Answer 1

我自己近一年来一直在研究同样的问题。我发现的最好的图书馆是d3.js，protovis.js的继承者。好消息是d3.js树形图和节点链接树应该足够灵活，可满足您的任何/所有需求;但坏消息是你可能不得不编写自己的分类逻辑和交互逻辑。

http://mbostock.github.com/d3/ex/cluster.html

http://mbostock.github.com/d3/ex/tree.html

为解决这个问题，d3.js库实际上使用HTML5的内联SVG。
亚比

ps：找到了使用树状图交互式教程以及如何构建分类逻辑的教程。 http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/

Answer 2

你看过Wakanda了吗？我认为数据源模型可能提供适合的结构...... http://www.wakanda.org/

Answer 3

我实际上放了一个d3脚本来完成这个，在这里找到它：https://github.com/ConstantinoSchillebeeckx/phylogram_d3

Answer 4

Phylotree.js是使用d3在SVG中执行此操作的一个很好的库。它可以读取Newick字符串，并使用内部标签和可折叠节点绘制它们。