20

最近我读了很多关于 Java 和 Javascript 的图形库的文章，但我还没有找到一个好方法来做我想做的事情。

本质上，我有一个关于一堆元素（多达数千个）的集合层次结构。这些集合可以完全或部分重叠、完全覆盖或完全不相交。我想做的是显示以下信息：

  • 集合的大小（相对于其他集合）
  • 一组的“热”值（以颜色代码表示），由其覆盖的元素计算得出
  • 单个图形中集合的完整拓扑（以便向用户显示重叠、交叉点等）

编辑：也许我应该举一个例子来说明我所说的集合和元素以及部分重叠的层次结构。以下是我处理的那种集合的过度简化版本（请注意，数字1-和10字母a-代表彼此可比较的元素）：hX

Set1 = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}
Set2 = {1, 2, 3, 4, 5, 6}
Set3 = {1, 2, 3}
Set4 = {1, 4, 5, 6, 7}
Set5 = {a, b, c, d, e, f, g, h}
Set6 = {a, b, c, d, e}
Set7 = {a, b, c, 7}
Set8 = {2, 4, 7, 8, c, f}
Set9 = {X}

我不确定如何以直观的方式显示这些信息。我已经看到了我在视觉上非常喜欢的 Voronoi ¹、²图表，但是它们具有不同的数学背景，所以我认为我无法以适当的方式描绘我所拥有的层次结构。我想在运行时（在 Java 的情况下）创建这些图表，或者在 HTML 部署的情况下使用 Javascript，两者都很好。然而，有一个约束条件是图形需要创建或可以导出为高分辨率矢量图形。

简而言之，我的问题：

  1. 有没有一种很好的方法来可视化我拥有的数据类型？如果是这样，它是否以易于实现的形式存在（即库）？
  2. 如果问题没有简单的解决方案，换句话说，如果我需要在这种情况下发明轮子，我该如何自己实现这样的图表？什么是好的起点？我要特别注意什么？

谢谢！

编辑：我的潜在想法是将通用集合中的所有元素布局为具有所需颜色覆盖的六边形网格，然后绘制集合的边界。然而，这个想法有几个问题，特别是为元素指定位置的问题，因此集合不会在整个图上分裂。有什么意见/建议吗？

4

4 回答 4

10

是的，这是一个经过充分研究的问题。您所描述的称为超图。每个元素都可以表示为图中的一个顶点，集合是超边。那么问题就变成了可视化超图的问题。

在此处输入图像描述

不幸的是，没有完美的通用解决方案，因为即使是最简单的图表也可能具有复杂的可视化效果。

如果您的集合相对较小（< 5 个元素），您可以使用像graphviz这样的常规绘图库。为此，只需连接每组中的所有顶点对并为它们着色。这将产生与此类似的解决方案：

在此处输入图像描述

于 2012-07-19T00:33:40.090 回答
5

您是否考虑过二维网格：

  • 将设定的数字放在一个轴上
  • 将在所有集合中找到的独特元素放在另一个轴上
  • 为在集合中找到元素的每个单元格着色（通过查看该行和列的标签）

虽然这种可视化方法通常不如目前提到的一些更复杂的方法，但它的优点是当您拥有数千个元素和数千个集合时，它实际上是可能的。

诀窍是以对用户有用的方式将最多信息放在一起的方式对行和列进行排序。我的直觉告诉你，你要解决的问题是让彩色细胞尽可能“像斑点”——如果每组相邻的彩色细胞都被称为一个“区域”，那么不同区域的数量最少，并且他们有最少的洞。

这本身就是一个非常复杂的问题，但至少可以通过为每个集合与其他集合计算一些邻接因子来部分解决。您正在寻找的是接近的“岛屿”——所以从一对最相似的集合开始，将它们添加到图表中，并将它们视为一个区域。用替换它所持有的对的区域重新计算您的接近度数（以某种方式平均？）。找到下一个最接近的项目对（每个项目是一个区域或一组），如果该对与图中任何现有区域的接近度在某个阈值内，则附加到该区域的一侧，否则创建一个新的，单独的区域（再次删除该对的接近度值并重新计算区域本身）。最终，所有集合都将添加到区域中，并且所有区域都将加入。

虽然这可能永远不会给出最佳配置，但与随机分布相比，它应该提供一些区域较少的东西。

最后，一些动态重新排序可能很有用，允许用户选择一个有趣的集合或元素，并将其用作完全重新排列的图形的种子，根据与该元素的接近度（以及随后组合后的该区域）计算每个添加与另一个元素），而不是任何整体的最低接近度。

这是结果图，对您问题中的示例数据集完成了上述逻辑过程：

集合和元素

决定如何对列进行排序很复杂，但基本上你可以通过将列移动到相邻的位置来获得某种合理的结果，前提是这样的移动不会干扰任何已添加段的彩色块区域。

额外的想法：

  • 计算集合接近度不仅仅是它们有多少共同元素，还有它们有多少不共同的元素。如果两对集合之间有 3 个共同元素，但其中一对有 5 个非共享元素，另一对有 3 个非共享元素，则具有 3 个非共享元素的对比另一对更接近匹配。
  • 将集合添加到图表后，就有机会重新排序元素。尽可能将元素堆叠在最左边是第一次放置的良好开端。在那之后，将最常见的元素堆叠在最左边似乎很好。在那之后，它崩溃了。我想知道让彩色单元格靠近对角线（从左上角到右下角）是否也是一种有用的算法——这让我想起了一点设计结构矩阵，尽管它只显示了单向依赖而不是两个-方式关系。
  • 当彩色斑点由与所有其他集合完全不相交的集合组成时（例如您的示例中包含 X 的集合），它可以移动到单独的图表中。
于 2012-07-24T22:21:33.947 回答
2

有很多方法可以解决这个问题，但就个人而言，我会使用动态生成的 SVG 和Raphael JS之类的工具绘制一种维恩图，并按照我想要的方式着色。此外，Raphael 有类似Set的 API ，可以让您提供有关元素及其关系的完整详细信息。那里的 SVG 到代码转换器也可能有助于理解如何生成 SVG 元素。

或者，您可以使用维恩图等工具：

维恩图示例

这似乎很容易适应这种情况。还有Flotr2可以创建气泡图：

气泡图浮动器

甚至Canvas Express。

Canvas Xpress 图表

使用任何后来的工具进行更多调整将使您能够正确完成它......

于 2012-07-24T22:37:36.377 回答
0

我没有以正确格式获取数据的解决方案。看看这个由 MIT 创建的用于构建图形的 javascript 插件sigmajs。没有看过它接受的数据，但可能值得一看。

于 2012-07-18T22:46:21.307 回答