当前位置：文江博客话题详情

RCC(8) 规范或类似规范的维恩图生成软件

发布于 2024-10-24 18:37:53 字数 1121 浏览 1 评论 0原文

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

我正在寻找一种方法来转换任意一组 RCC

W {EC} Y、X {TPP} Y、Z {NTPP} Y、 Z {PO} X。

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

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

有谁知道至少可以以编程方式生成此类图（通过 API）的软件）来自类似 RCC 的约束规范？

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无语# 2024-10-31 18:37:53

谁需要后端？这是一个使用 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 元素：
邻接 -->同级 HTML 元素：

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

包含，带切线：
（子级具有负上边距以接触父级）
邻接，有重叠： < ;div class="region">
（添加了一个包装器以触发 CSS子元素 - 第二个元素的左边距为负，与第一个元素重叠。）

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

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

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

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

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

Who need's a backend? Here's a working prototype using HTML/CSS/JS:

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

Just enter the RCC8 code syntax in the field and hit the button!

HTML/CSS/JS RCC8 Diagram Builder

Some current limitations:

Doesn't handle ambiguity
There's no error handling if syntax is off
Probably breaks in some valid cases (I haven't tested very much)
Didn't implement any inverse cases (yet?)

Edit: How it works

Basically, there are two families of relationships shown with these diagrams:

A contains B
A is adjacent to B.

There are then sub-types or variations, like:

A contains B and B is tangential to A
A is adjacent to B and A overlaps with to B

Both of the basic concepts are kind of baked into the HTML rendering world:

containment --> nested HTML elements: <div class="region"><div class="region"></div></div>
adjacency --> sibling HTML elements: <div class="region"></div><div class="region"></div>

I handle the variations with special classes that (rather crudely) wiggle margins around to accomplish the desired layout:

containment, with tangent: <div class="region"><div class="region touches-parent"></div></div> (child has negative top margin to touch parent)
adjacency, with overlap: <div class="ven"><div class="region"></div><div class="region touches-parent"></div></div> (a wrapper is added to trigger CSS on the children - the second element has negative left margin to overlap the first.)

There is some static markup commented out in the jsfiddle showing the structure I started with.

To complete the functional loop, there is a bit of code that parses the RCC8 statement into A {XX} B parts, and attempts to render the necessary markup for each part. It checks as it goes to not duplicate regions. I also go through afterwards and set the heights of all sibling the same, which ensures they will overlap and/or abut properly.

This code is really just a start, and it has it's conceits. It's basically a linear diagram, which means it doesn't, for instance, handle cases where there are complicated adjacencies, like this:

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

These might be handled be smarted JS parsing and more complicated CSS, but probably quickly venture into the realm of more force-directed layouts (a smarter bubble chart, for instance).

回复收藏 0 原文

挽梦忆笙歌 2024-10-31 18:37:53

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

在此处输入图像描述

这是相应的 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>

还有一个用于 SVG 的 Apache 工具包，名为Batik，它应该支持 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 的西南方向绘制 Y 圆 (X.south west)，表示 Y 的锚点也在西南方向 (anchor=south west)。您可以在此处找到更复杂的示例，以及一些其他讨论此处。

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

我希望这有帮助，祝你好运！

I don't know of any software that can generate such diagrams. However, If I had to tackle your problem I would probably explore the possibility of using Scalable Vector Graphics (SVG). I think you can translate your DSL for RCC into SVG XML, and then you can render it (maybe in a Web browser). You can easily find examples on the Web by searching for "svg venn diagram". A nice one is here: here's a diagram that I generate from that website

enter image description here

and here's the corresponding SVG code (also from the website):

<?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>

There's also an Apache toolkit for SVG called Batik, which should support display, generation or manipulation of SVGs.

Another option is to use TikZ & PGF with LaTeX: there you have powerful macros that let you programmatically place shapes, and the rendering is done by LaTeX. Here's an example:

\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}

which produces the following (i.e. the RCC8 TPP relation):

enter image description here

You can see from the LaTeX code that you can draw the Y circle at south west of X (X.south west) saying that Y's anchor is also at south west (anchor=south west). You can find a more complex example here, and some additional discussion here.

Although this is not yet a layout algorithm that draws RCC8 relation for you, I think you can define LaTeX macro that translate RCC8 relations into PGF/TikZ macros. The drawback is that you must then compile the LaTeX code.

I hope this helps and good luck!

回复收藏 0 原文