24

注:報奨金は利用できなくなりましたが、この質問への回答をお持ちの方からの貢献をお待ちしております。私はまだそれを見ていて、より良い答えがあるかどうかを確認するのを待っています. ありがとう、そして読んでください...


制約ネットワークを記述するRCCのような空間関係 (または同様のもの)の任意のセットをベン図のような画像に変換する方法を探しています。たとえば、RCC8 で表現される制約ネットワーク:

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

..円形または正方形の領域を持つ次の図で表すことができます。

例 1: 円形領域を使用して制約ネットワークを表すベン図。..代わりに:   正方形領域を使用して制約ネットワークを表すベン図。

RCC のような制約の仕様から、少なくともそのような図をプログラムで (API を介して) 生成できるソフトウェアを知っている人はいますか?

このような制約ネットワークが指定不足である可能性があることは認識しており、そのような図の 1 つに一致することはありません (多くのソリューションが存在する可能性があります)。理想的には、可能な代替手段を生成できるようにすることでこれに対処したいと考えていますが、今のところ何も頼ることはできません (そしてエラーを発生させます)。

明確にするために、この質問では、RCC のような制約に基づいてダイアグラムのレイアウトを宣言的な方法で計算できるソフトウェアを具体的に求めています。私は、RCC の DSL を他の構文に変換するツールには関心がありませんし、特定の画像シリアライゼーションのフォーマットや方法にも関心がありません。最大 6 つの一意のセットの任意の数の制約を処理するために、これを行うアルゴリズムを見つけたいと考えています。

注: Graphviz (下記の @vickirk として) は、ダイアグラム レイアウト ソフトウェア パッケージの例であり、私が求めているものに似ています。残念ながら、Graphviz 自体はこの問題を解決できないようです (しかし、間違っていることが証明されれば幸いです!)。これは非常に難しい問題のようです。

4

3 に答える 3

19

誰がバックエンドを必要としていますか? HTML/CSS/JS を使用した実用的なプロトタイプを次に示します。

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

フィールドにRCC8コード構文を入力してボタンを押すだけです!

HTML/CSS/JS RCC8 ダイアグラム ビルダー

現在の制限:

  • あいまいさを処理しない
  • 構文がオフの場合、エラー処理はありません
  • おそらくいくつかの有効なケースで壊れます(私はあまりテストしていません)
  • 逆のケースを実装していない (まだ?)

編集:仕組み

基本的に、これらの図で示されている関係には 2 つのファミリがあります。

  • ABを含む
  • AはBに隣接しています。

次に、次のようなサブタイプまたはバリエーションがあります。

  • AはBを含みBはAに接する
  • Aは B に隣接しており、 AはB重複しています

どちらの基本概念も、 HTMLレンダリングの世界に組み込まれています。

  • 包含 --> ネストされた HTML 要素:<div class="region"><div class="region"></div></div>
  • adjacency --> 兄弟 HTML 要素:<div class="region"></div><div class="region"></div>

私は、目的のレイアウトを実現するためにマージンを (むしろ大雑把に) 微調整する特別なクラスを使用してバリエーションを処理します。

  • 包含、接線あり: <div class="region"><div class="region touches-parent"></div></div> (子は親に接する負の上部マージンを持っています)
  • adjacency, with overload: <div class="ven"><div class="region"></div><div class="region touches-parent"></div></div> (ラッパーが追加され、子要素で CSS をトリガーします。2 番目の要素には、最初の要素とオーバーラップする負の左マージンがあります。)

私が始めた構造を示す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コードは次のとおりです(これもWebサイトから):

<?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と呼ばれる SVG 用の Apache ツールキットもあり、SVG の表示、生成、または操作をサポートする必要があります。

もう 1 つのオプションは、LaTeX でTikZ & PGFを使用することです。そこには、プログラムで図形を配置できる強力なマクロがあり、レンダリングは 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 westY のアンカーも南西 ( 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 に答える