Basic Werk | Blog | Contact


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 が生成される。


test LAMBDA LAMBDA LAT LAT LAMBDA--LAT LISP LISP LAMBDA--LISP SCHEME SCHEME LAMBDA--SCHEME PERL PERL LAMBDA--PERL REGEX REGEX LAMBDA--REGEX PERL--SCHEME PERL--REGEX REGEX--LISP REGEX--SCHEME REGEX--PERL


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