WebPage上的层次结构表示

Question

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

让我们先有一些背景化:假设你有一个由几个员工组成的公司……

常用的是：

树状建筑：

​

​

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

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

圆圈模式：

​

​

节点模式：

​

​

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

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

请分享你的观点，想法，路线.？

Answer 1

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

在图形绘制中，基本上可以用三组属性来描述绘图：

• 您的绘图约定，即如何在可视化中表示节点和边缘。可能的选择是：

- Represent your nodes as _points_, your edges as non-intersecting _curves_ between them.

这可能是专门化的，例如，要求点放置在一个规则的网格上，在根周围的同心圆或类似的东西上。还有，你可以要求边沿是直线，圆的args，.

这可能是你在谈论树可视化时首先想到的。

​

- Represent your nodes as _rectangles_, your edges implicitly by nesting the rectangles. This is commonly known as a _tree map_ 

​

​

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

- Maximize angles between edges
- Minimize the area the tree takes
- Minimize the potential energy if you build a physical model based on the tree (see Wikipedia: [Force-directed graph drawing](https://en.wikipedia.org/wiki/Force-directed_graph_drawing))

...

​

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

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

• 正如您已经展示的那样，以基于圆圈的方式绘制您的树，方法是将根放在中心，孩子在根周围以同心圆的方式排列，或者将节点的所有子树以圆形的方式围绕在它周围。这些在GraphViz工具中被实现为circo和twopi。
• 使用类似于您的树视图的HV布局，主要保持水平和垂直的边缘，但在子树的放置上允许更多的自由。

​

• 使用许多直线绘制技术中的任何一种，以水平方向操作，即根部放置在顶部，其子项在下面一层，.

​

• 将树表示为类似于上面示例的树映射。

大多数，如果不是所有这些技术是描述和可视化在树绘章节的图文绘制和可视化手册由塔西马网。阿尔。