recursion - HTML 中树层次结构的可视化

Question

我正在寻找在层次结构/树结构上进行交互设计的灵感。（具有多个子产品的产品，适用于选择子产品的规则）。

我想要一棵树，其中子节点与其父节点之间存在可见的连接。而且我还想可视化适用于选择它们的规则。

典型规则：

• 强制：仅选择一种子产品之一
• 可选：从多个子产品中选择 0 个或多个
• 互斥：只选择几个子产品之一

我希望你能明白。

我正在寻找这方面的任何灵感。欢迎任何建议，示例，提示

Answer 1

这里有几个：

• http://thejit.org/
• http://www.jsviz.org/blog/
• http://vis.stanford.edu/protovis/

如果您愿意使用 html/javascript 以外的其他内容，Flare是一个出色的 Adob​​e Flash 库。

Answer 2

我已经在这种情况下使用了 Infoviz 库（这里是演示）。您可以将不同的节点颜色用于不同的选择规则以及一些文本描述，尽管起初它不是很直观。

默认的树方向是水平的，这可能看起来很奇怪，但在添加可变长度的文本节点名称时才有意义。