svgを使った関数グラフの自動生成スクリプト

随分間があいてしまったなぁ．
（chromeのsvgサポートがアレ過ぎてやる気を無くしてしまっていたのさぁ．）

さて今回作ってみたのは，svgを使って関数グラフを描いてしまおうってスクリプト．



グラフを作るのにd3.jsやRaphaelを使ってもいいんだけれど，これじゃあsinカーブはどうひねっても簡単にはいかない．ならどうするかと調べてみていたら，既にASCIIsvg.jsってライブラリがあって，これが結構面白い動きをしている．

ただいかんせんie時代の代物なので，firefoxとかで動かすには機能的に見劣りする．なので改めてhtml5の機能を使って書きなおしてみたものがこの拙作SVGGraph.jsということになる．

実際に見てもらったほうがいいね．

それで下がこのグラフを描画するために記述したコード．

<svg width="300" height="300" script="
setRange(-5,5,-5,5);
axis('full', 1, 1, 0, 0);
style.stroke = 'red';
plot('3sin(x/2π)');
" mode="m"/>

グラフに割り当てるsvg要素にscript属性を追加して，その中にグラフ出力のスクリプトを記述するのがミソ．これだけでグラフを描画するどころか，ui生成とかsvgファイル出力とかグラフ画像出力とか全て勝手に行います．ドラッグしたらグラフの位置まで変わる．

多少javascriptの知識は必要になるけれど，svgファイルの出力やマクロ定義等の仕組みが上手く動作するため，結構実用的なものができたんじゃないかと自負している．なので，興味が有る方はぜひ使っちゃって下さい．ライセンスはGPL2MITなので，後は煮るなり焼くなりご随意に．

ああ，動作検証はそれほどやってませんのでそこの所はゴメンナサイ．

※実はアニメーション機構も実装してみたんだけれど，どうにもchrome環境でフリーズが発生してしまい詮方なく．firefoxだと正しく動作しているので何が悪いのか見当がつかないものの，functionオブジェクトの開放に失敗している感じがする．直せる自身の有る方はぜひチャレンジして下さい…orz...

※問題解決．domの使い方がお大尽過ぎた．フリーズじゃなくってガベージコレクションがエラいことになってただけらしい．よって，domの再利用をするようにしたらまともな動作に改善．なるほど．