HTML 中树层次结构的可视化
我正在寻找在层次结构/树结构上进行交互设计的灵感。 （具有多个子产品的产品，适用于选择子产品的规则）。
我想要一棵树，其中子节点与其父节点之间存在可见的连接。我还想可视化适用于选择它们的规则。
典型规则：
- 强制：仅选择一个子产品中的一个
- 可选：选择多个子产品中的 0 个或多个
- 互斥：仅选择多个子产品中的一个
我希望您明白这一点。
我正在寻找这个领域的任何灵感。欢迎任何建议、示例、提示
I am looking of inspiration for doing interaction design on a hierachy/tree structure. (products with a number of subproducts, rules that apply for selecting subproducts).
I want to have a tree where there is a visible connection between sub-nodes and their parent node. And i also want to visualize which rules that apply for selecting them.
Typical rules:
- mandatory: select only one of one sub-product
- optional: select 0 or more of several subproducts
- mutual exclusive: select only one of several subproducts
I hope you get the idea.
I am looking for any inspiration in this area. Any suggestions, examples, tips are welcome
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
以下是几个：
如果您愿意使用 html/javascript 以外的其他内容，Flare 是 Adobe Flash 的一个优秀库。
Here are several:
If you are willing to use something other than html/javascript, Flare is an excellent library for Adobe Flash.
我已经将 Infoviz 库用于此类场景（这里是 演示）。您可以将不同的节点颜色与一些文本描述一起用于不同的选择规则，尽管一开始并不是很直观。
默认树方向是水平的，这可能看起来很奇怪，但当您添加可变长度的文本节点名称时，这是有意义的。
I've used Infoviz library for such scenario (here's the demo). You could use distinct node colors for different selection rules together with some textual description, although it wouldn't be very intuitive at first.
Default tree orientation is horizontal, which may look odd, but makes sense when you add textual node names of variable length.