2013年11月29日金曜日

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の再利用をするようにしたらまともな動作に改善.なるほど.

4 件のコメント:

  1. こんにちは。SVGGraph.jsを使わせてもらっている大学生です。

    関数グラフ描画スクリプト・SVGGraph.jsのことで質問なのですが
    1次関数や2次関数のグラフを描く方法を
    ”通る点を数値で指定”から”グラフに直接マウスアップ(orマウスダウン)で指定”
    にすることはSVGGraph.jsで可能なのでしょうか?(後半のほうに座標を取得できる機能があるのでもしかしたらできるかもと思ったので)

    返信削除
  2. 技術的には「可能」ですが,どのように実現するかは別問題となるでしょう.
    本スクリプトでは関数をy=ax^2+bx+c形式で指定しますが,表題の要件を実現するにはポインタで取得した座標を元に方程式を解いて係数a,b,cを決定する必要があります.
    この過程で何らかのプログラムを自作せねばなりません.
    (要はSVGGraph.jsではそこまでの便利機能は提供していません.)

    返信削除
  3. スクリプトにバグを見つけたので修正しました.
    それと,簡単な実装サンプルを追加しましたので確認してみてください.

    返信削除
  4. 返信ありがとうございます。

    ポインタで取得した座標を元に方程式を解いて係数a,b,cを決定するプログラムを作ってみようと思います。(できるかはわかりませんが(笑))
    アドバイスありがとうございます。

    返信削除