HTML 中树层次结构的可视化答案

【问题标题】：Visualisation of Tree Hierarchy in HTMLHTML 中树层次结构的可视化
【发布时间】：2017-01-22 23:37:12
【问题描述】：

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

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

典型规则：

希望你能明白。

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

【问题讨论】：

【解决方案1】：

这里有几个：

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

【讨论】：

这些 Protovis 示例非常漂亮。我可以研究它们几个小时。谢谢你指点我。回到我的问题，有一些例子可能适合产品/子产品结构：Sunburst 或 Icicle 都代表层次结构。但没有人形象化规则的视角。如何可视化一些产品是强制性的，另一些是可选的，而另一些又是相互排斥的？
你能举个例子吗？你是说用户选择了汽车品牌，然后有这么多互斥车型的选择，然后有自动与手动的互斥选择，然后对汽车的颜色有互斥的选择等等......然后他们有 DVD 播放器、GPS 等可选的选择吗？那是用例吗？用户是谁？消费者？营销人？工程师？
是的，汽车的例子很不错，实际上。（让我们暂时忽略强制性选择，例如一台发动机、四个轮胎等）。除了强制性选择外，还有您提到的可选选项。还有一些是互斥的。在您的示例中，自动与手动换档。我尝试可视化的产品树更加分层，因此选择进入任何深度的子产品。所以在每个树节点上，我真的需要一些指示选择类型的东西。（可能是树节点上的“选择 0..2”或类似内容）
只添加诸如'select 0..2'、'optional'、'choose 1'之类的文字可能是合理的。

【解决方案2】：

我在这种情况下使用了 Infoviz 库（这里是 demo）。您可以将不同的节点颜色与一些文字描述一起用于不同的选择规则，尽管一开始并不是很直观。

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

【讨论】：