HTML中树层次结构的可视化

Question

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

我想要一个树，其中子节点和它们的父节点之间存在可见的连接。我还想想象出适用于选择它们的规则。

典型规则：

• 强制：仅选择一个子产品中的一个
• 可选：选择0个或多个子产品
• 互斥：仅选择多个子产品中的一个

我希望你明白这一点。

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

Answer 1

以下是几个：

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

如果您愿意使用html / javascript之外的其他内容，Flare是Adobe Flash的绝佳库。

Answer 2

我已经使用Infoviz库来实现这种情况（这里是demo）。您可以将不同的节点颜色用于不同的选择规则以及一些文本描述，尽管起初它不是非常直观。

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