MEMOMEM

¶ Graphviz_make_dot_file_and_svg

Graphviz の練習

dot ファイルの中身：

ファイル名 -> test



graph{
    graph [rankdir=RL, ranksep=0.15, overlap=false, size=50.0];
    node [fontname="Gill Sans"];
    edge [dir=both, arrowhead=none, arrowtail=none];
    LAMBDA[URL="http://basicwerk.com/memo.cgi?search=LAMBDA"];
    LAT[URL="http://basicwerk.com/memo.cgi?search=LAT"];
    LISP[URL="http://basicwerk.com/memo.cgi?search=LISP"];
    SCHEME[URL="http://basicwerk.com/memo.cgi?search=SCHEME"];
    PERL[URL="http://basicwerk.com/memo.cgi?search=PERL"];
    REGEX[URL="http://basicwerk.com/memo.cgi?search=REGEX"];
    LAMBDA -- {LAT;LISP;SCHEME;REGEX;PERL};
    PERL -- {SCHEME;REGEX};
    REGEX -- {LISP;SCHEME;PERL};
}

graph [ ..., size=50.0]; はグラフが大きくなりすぎた時のことを考えて。このサンプルぐらいの大きさなら関係ない。

で、下記のコマンドを実行すると、

$ neato -Tsvg -O test

こんな SVG が生成される。

dot ファイルからグラフを生成するコマンドはいろいろあるので、後で試してみる。

circo, dot, fdp, neato, nop, nop1, nop2, osage, patchwork, sfdp, twopi

参考：

Graphviz - 簡単な使い方

http://reddog.s35.xrea.com/wiki/Graphviz.html

Graphvizのneatoでノード間の線の長さを変更する

http://kyle-in-jp.blogspot.jp/2011/03/graphvizneato_26.html

Graphvizのレイアウトについて - だらろぐ

http://r-satsuki.air-nifty.com/blog/2009/04/graphviz-d4e2.html

Graphvizレイアウトサンプル - hp12c

http://melborne.github.io/2013/04/02/graphviz-layouts/

#Graphviz #SVG #Visualizing #HTML

SN 2013/06/30 12:32:30

Archives > Graphviz_make_dot_file_and_svg.html

¶ Graphviz_reference_site

Graphviz の描画で参考にさせていただいたサイト。

簡単な使い方 - Graphviz

http://reddog.s35.xrea.com/wiki/Graphviz.html

形の一覧

http://homepage3.nifty.com/kaku-chan/graphviz/chapter_010.html

#Graphviz #Visualizing #SVG

SN 2013/06/29 01:19:53

Archives > Graphviz_reference_site.html

¶ HTML_SVG_htaccess_AddType

HTML に SVG を埋め込むには、サーバが Content-Type:image/svg+xml で返さないといけないので、.htaccess に以下の行を追加。

AddType image/svg+xml .svg AddType image/svg+xml .svgz

SVG ファイルを外部ファイルに設置して、Object 要素で読み込むという方法に一度はトライしたが、この方法だと、Node に設定した HREF を叩いた時、SVG を読み込んでいる Object 内にハイパーリンク先のページを読み込んでしまうという仕様に遭遇。

これは意図した動作ではなかったので、やはり HTML 内に SVG をベタ書きすることにした。

HTML5 基準なら、body 内にいきなり SVG 要素を書き始めれば良い。

参考：

[SVG][.htaccess]HTMLに外部SVGファイルを埋め込む - すごい速さ

http://coban.jp/blog/2010/10/13/svg-htaccesshtmlに外部svgファイルを埋め込む/

#SVG #HTML5 #Apache #htaccess #Graphviz

SN 2013/06/29 00:07:21

Archives > HTML_SVG_htaccess_AddType.html

Basic Werk | Blog | Contact

MEMOMEM

¶ Graphviz_make_dot_file_and_svg

¶ Graphviz_reference_site

¶ HTML_SVG_htaccess_AddType