WebPage上的分层结构表示

Question

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

首先让我们进行一些情境化： 假设你有一家公司，其成员包括几名员工......

常用的是什么：

树架构：

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

另外两种可能带来一些灵活性的方法：

圈子模式：

和节点模式：

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

我想使用JSF，但这里的技术并不重要，这是一个概念阶段。

请分享您的观点，想法，路径......？

Answer 1

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

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

• 您的绘图惯例，即节点和 edge 在可视化中的表示方式。可能的选择是：

  • 将您的节点表示为 points ，将您的边缘表示为不相交的曲线。
    这可能是专门的，例如要求将点放在规则网格上，在根周围的同心圆上或类似的东西上。此外，您可以要求边缘为直线，圆弧，... 这可能是您在谈论树形象化时首先想到的。
  • 将节点表示为矩形，通过嵌套矩形隐式表示边缘。这通常称为树图

• 您想要优化的一些美学，即

  • 最大化边缘之间的角度
  • 最小化树的区域
  • 如果您基于树构建物理模型，请尽量减少潜在能量（参见维基百科：Force-directed graph drawing）
    ...

• 您还可以在节点或边缘放置一些约束，例如将某些节点固定到某个位置，强制执行某些边长或类似的想法。

现在我已经解释了基础知识，让我列出一些方法：

• 正如您已经展示的那样，以圆形方式绘制树，方法是将根放在中心，将子项放在根周围的同心圆中，或者以圆形方式将节点的所有子树对齐。这些内容在circo工具twopi和git fetch
中实施
• 使用类似于树视图的 HV布局来大多坚持水平和垂直边缘，但允许在子树放置中更自由一点
• 使用水平操作的许多直线绘图技术中的任何一种，即根位于顶部，其子级位于下方，... GraphViz
• 将您的树表示为树形图，类似于上面的示例。

大多数（如果不是全部）这些技术都是在Tassima等人的图形绘制和可视化手册的中描述和可视化的。人