24

请注意：虽然赏金不再可用，但我仍然渴望任何对此问题有答案的人做出贡献；我还在看，等着看有没有更好的答案。谢谢，请继续阅读...

我正在寻找一种方法来将描述约束网络的任意一组类似RCC的空间关系（或类似的）转换为类似维恩图的图像。例如，RCC8 中表示的约束网络：

W {EC} Y, X {TPP} Y, Z {NTPP} Y, Z {PO} X.

..可以用下图表示，带有圆形或方形区域：

示例 1：使用圆形区域表示约束网络的维恩图。..或者：   使用方形区域表示约束网络的维恩图。

是否有人知道至少可以从类似 RCC 的约束规范中以编程方式（通过 API）生成此类图表的软件？

我知道这样的约束网络可能未指定，从而排除了与任何单个此类图表的匹配（可能存在许多解决方案）。理想情况下，我想通过能够生成可能的替代方案来解决这个问题，但现在可以不采取任何措施（并引发错误）。

为了清楚起见，在这个问题中，我特别要求能够以声明方式基于类似 RCC 的约束计算图表布局的软件。我不关心将 RCC 的 DSL 转换为其他语法的工具，也不对特定的图像序列化格式或方法感兴趣。我希望找到一种算法来处理最多六个唯一集合的任意数量的约束。

注意： Graphviz（如下面提到的@vickirk）是图表布局软件包的一个示例，类似于我所追求的。不幸的是，Graphviz 本身似乎无法解决这个问题（但我很高兴被证明是错误的！）。看来这是一个非常难的问题。

4

3 回答 3

19

谁需要后端？这是一个使用 HTML/CSS/JS的工作原型：

http://jsfiddle.net/RuvE6/6/

只需在字段中输入 RCC8 代码语法并点击按钮！

HTML/CSS/JS RCC8 图表生成器

当前的一些限制：

  • 不处理歧义
  • 如果语法关闭，则没有错误处理
  • 在某些有效情况下可能会中断（我没有进行太多测试）
  • 没有实现任何反例（还没有？）

编辑：它是如何工作的

基本上，这些图表显示了两个关系族：

  • A包含B
  • A与B相邻。

然后有子类型或变体，例如：

  • A包含B且B与A相切
  • A与B相邻且A与B重叠

这两个基本概念都融入了 HTML 渲染世界：

  • 包含 --> 嵌套的 HTML 元素：<div class="region"><div class="region"></div></div>
  • 邻接 --> 同级 HTML 元素：<div class="region"></div><div class="region"></div>

我使用特殊类处理变化，这些类（相当粗略地）摆动边距以完成所需的布局：

  • 包含，切线：（ <div class="region"><div class="region touches-parent"></div></div>孩子有负上边距接触父母）
  • 邻接，有重叠：（ <div class="ven"><div class="region"></div><div class="region touches-parent"></div></div>添加了一个包装器以触发子元素上的 CSS - 第二个元素的左边距为负值以与第一个元素重叠。）

jsfiddle 中注释掉了一些静态标记，显示了我开始使用的结构。

为了完成功能循环，有一段代码将 RCC8 语句解析为 A {XX} B 部分，并尝试为每个部分呈现必要的标记。它会检查是否不重复区域。之后我还会将所有兄弟姐妹的高度设置为相同，以确保它们正确重叠和/或邻接。

这段代码实际上只是一个开始，它有它的自负。它基本上是一个线性图，这意味着它不处理存在复杂邻接的情况，例如：

A {EC} B, C {EC} B, D {EC} B

这些可能会被智能 JS 解析和更复杂的 CSS 处理，但可能会很快进入更多强制导向布局的领域（例如更智能的 气泡图）。

于 2011-03-30T06:06:05.280 回答
2

我不知道有什么软件可以生成这样的图表。但是，如果我必须解决您的问题，我可能会探索使用Scalable Vector Graphics (SVG)的可能性。我认为您可以将用于 RCC 的 DSL 转换为 SVG XML，然后您可以渲染它（可能在 Web 浏览器中）。您可以通过搜索“svg venn diagram”在 Web 上轻松找到示例。一个不错的在这里：这是我从该网站生成的图表

在此处输入图像描述

这是相应的 SVG 代码（也来自网站）：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg 
    height="150" 
    width="200" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">    
<title >WIBR Venn diagram</title>
    <ellipse 
        cx="141.795128105731" 
        cy="75" 
        id="circle2" 
        rx="58.2048718942687" 
        ry="58.2048718942687" 
        style="fill: gray; fill-opacity: 0.5; stroke: black; stroke-width: 1; stroke-opacity: 1" />
    <ellipse 
        cx="67.2091969126074" 
        cy="75" id="circle1" 
        rx="67.2091969126074" ry="67.2091969126074" 
        style="fill: darkgray; fill-opacity: 0.5; stroke: black; stroke-width: 1; stroke-opacity: 1"/>
</svg>

还有一个名为Batik的 Apache SVG 工具包，它应该支持 SVG 的显示、生成或操作。

另一种选择是将TikZ 和 PGF与 LaTeX 一起使用：你有强大的宏，可以让你以编程方式放置形状，渲染由 LaTeX 完成。这是一个例子：

\documentclass[a4paper,10pt]{article}

\usepackage{tikz}
\usetikzlibrary{shapes,calc}

\begin{document}

\pagestyle{empty}

\begin{tikzpicture}

    \node (TPP) {X TPP Y};

    \node
        [ circle,
            draw,
            minimum width=2cm,
            label={[label distance=-0.7cm]145:X},
        ] (X) [right of=TPP,xshift=1cm] {};

    \node
        [ circle,
            draw,
            minimum width=1cm,
            anchor=south east,
        ] (Y) at (X.south east) {Y}; 

\end{tikzpicture}

\end{document}

这会产生以下内容（即 RCC8 TPP 关系）：

在此处输入图像描述

您可以从 LaTeX 代码中看到，您可以在 X ( X.south west) 的西南方向绘制 Y 圆圈，表示 Y 的锚点也在西南 ( anchor=south west) 处。您可以在此处找到更复杂的示例，并在此处进行一些额外的讨论。

虽然这还不是为您绘制 RCC8 关系的布局算法，但我认为您可以定义将 RCC8 关系转换为 PGF/TikZ 宏的 LaTeX 宏。缺点是您必须随后编译 LaTeX 代码。

我希望这个帮助能祝你好运！

于 2011-03-24T08:00:12.187 回答
0

你评估过 antlr，你可以为 RCC8 定义一个 EBNF 语法。使用 antlr 生成项目列表。此项目列表可用作VennMaster等软件的输入，用于绘制图表。

其他选项是 Goolge Charts ,

http://bioinfogp.cnb.csic.es/tools/venny/index.html

于 2011-03-24T04:43:13.560 回答