User interface 网页的层次结构表示法

我正在做一些研究，其主题是找到一种在简单网页上表示层次结构的适当方法。 精确性：这是一个巨大的数据量

让我们先进行一些语境化： 假设你有一家由几个部门组成的公司，其中有几个员工

常用的是：

树结构：

但我不喜欢它，因为如果你有大量的数据，如果你正在寻找几个对象，它可能会很棘手

2其他可能带来一定灵活性的方法：

圆圈模式：

和节点模式：

我认为可以帮助最终用户的一个功能是弹性搜索栏，但这里的目标是为用户在结构中导航带来一些灵活性

我想使用JSF，但这项技术在这里并不重要，它只是一个概念阶段

---

请分享你的观点、想法、线索

听起来您正在寻找树绘制算法。让我简要概述一下：

在图形绘制中，基本上可以通过三组特性来描述图形：

• 您的绘图约定，即节点和边在可视化中的表示方式。可能的选择包括：
  • 将节点表示为点，将边表示为它们之间的非相交曲线。
    这可能是专门化的，例如，要求将点放置在规则网格、围绕根部的同心圆或类似物上。此外，您还可以要求边为直线、圆args、…
    这可能是您在讨论树可视化时首先想到的。
  • 将节点表示为矩形，通过嵌套矩形隐式地表示边。这通常被称为树图
• 一些美学您想要优化，即
  • 最大化边之间的角度
  • 最小化树占用的面积
  • 如果基于树构建物理模型（请参阅维基百科：）
    
• 您还可以在节点或边上放置一些约束，例如，将某些节点固定到某个位置，强制执行某些边长度或类似想法

现在我已经解释了基本原理，让我列出一些方法：

• 如前所示，以基于圆的方式绘制树，方法是将根放置在中心，子节点围绕根同心圆，或者以圆形方式将节点的所有子树围绕根对齐。这些在工具中实现为

  circo

  和

  twopi

• 使用类似于树状视图的HV布局，主要使用水平和垂直边缘，但允许在子树放置中有更多的自由度
• 使用任何一种按级别操作的直线绘制技术，即根位于顶部，子项位于下方一个级别。。。
• 将树表示为树映射，类似于上面的示例

Tassima等人的《图形绘制和可视化手册》中描述并可视化了大部分（如果不是全部的话）这些技术