HTML中树形层次结构的可视化

Question

我正在寻找关于在层级/树形结构上进行交互设计的灵感。(产品有多个子产品，适用于选择子产品的规则)。

我想要一个树形结构，在其中子节点和它们的父节点之间有可见的连接。我还想可视化适用于选择它们的规则。

典型的规则：

• 必选：只选择一个子产品中的一个
• 可选：选择零个或多个子产品中的几个
• 互斥的：只选择几个子产品中的一个

希望你明白我的意思。

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

- Jesper Rønn-Jensen

Answer 1

这里有几个链接：

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

如果您愿意使用除html/javascript之外的其他东西，Flare是Adobe Flash的一个优秀库。

- Jay Askren

---

那些Protovis的例子真是太美了。我可以研究它们数小时。感谢您指引我去看它们。回到我的问题，有一些例子可能适用于产品/子产品结构：Sunburst或Icicle都代表层次结构。但没有一个能够可视化规则的角度。如何可视化某些产品是强制性的，其他是可选的，而另一些则是互斥的？ - Jesper Rønn-Jensen

你能给一个例子吗？你是说用户选择汽车品牌，然后有许多互斥的车型可供选择，然后有互斥的自动和手动选择，然后有互斥的颜色选择等等... 然后他们可以选择是否加装DVD播放器、GPS等选项？这就是使用案例吗？用户是谁？消费者？市场人员？工程师？ - Jay Askren

是的，汽车的例子非常好。暂时忽略必选项，如一个引擎、四个轮胎等。除了必选项外，还有一些可选项，正如你所提到的那样。还有一些是互斥的，就像你的例子中自动挡和手动挡一样。我试图将产品树更加分层，因此选择会出现在任何深度的子产品中。因此，在每个树节点上，我真的需要一些指示选择类型的东西（可能在树节点上标注“选择0..2”或类似的内容）。 - Jesper Rønn-Jensen

只需添加文本，例如“选择0..2”，“可选”，“选择1”可能是合理的。 - Jay Askren

Answer 2

我已经使用了 Infoviz 库来处理这种情况（这里是演示）。你可以为不同的选择规则使用不同的节点颜色，再加上一些文字说明，尽管一开始可能不太直观。

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

- aaimnr