ASCIISVG-IM という選択肢
ASCIIsvgの保守が現在ない状態で、SVG を簡単に使うことは難しい。 期待していたSVGGraph も残念ながらサポートページが消えてしまっている。そこで調べてみると、 ASCIIsvg-IM という、ASCIIsvg を大幅に書き直したライブラリがあることがわかった。このライブラリが使えるかどうか、試してみた。ASCIIsvg-IM については、 ASCIIsvg-IM.js Demo and Syntax (www.intmath.com)というページがある。 IM は、上記ページの Interactive Mathematics の頭文字を取ったのだろう。
以下のグラフィクスは、 ASCIIsvg-IM を使って表示したもので、下記サンプルはすべて上記ページにある（すべてではない）。
楕円、長方形、円弧
楕円や角の丸い長方形、円弧は次のように表示できる。
軸を等距離にしたグラフ
軸を等距離にしたグラフは次のようになる。
多角形
多角形は次のようにして書ける。
ループを使ったらせんの描画
螺線（らせん）を描画するには、ループを使えばいい。
ループを使った離散グラフの描画
グラフ理論で使う離散グラフを描画するには、ループを使えばいい。
点や線分、矢
点や線分、矢を描くことができる。
ベクトル
線分や矢と似ているベクトルも描くことができる。
数直線
数直線も描くことができる。
なお、上記リンクサイトでは、アニメーションや、スライダーを使った可変パラメータによる動的表示ページのデモンストレーションがあるが、私のこのページではまだできていない。
ASCIIsvg-IM の導入方法
以下、ASCIIsvg-IM を導入する方法を示す。
まず、下記のリンク先にある JavaScript ファイルを適当なディレクトリにダウンロードする。私は js ディレクトリにダウンロードした。
- https://www.intmath.com/includes/cssjs/ASCIIsvg-IM-2020-01-14.min.js
次に、doGraphs という関数を定義して、この中にグラフを書く関数とその関数とリンクする ID を記述する。ここでは多角形を描く関数を定義する。
function doGraphs() {
// 今まである要素の削除
for(i=0;i < 15;i++) { removeEle("asvg"+i+"SVG"); }
// 関数の定義
(function() {
boardID = "asvg2"; // HTML では <div id="asvg2"></div> などが書かれている場所
xMin=0; xMax=6; yMin=0; yMax=8;
padding = 20;
boardWidthToHeight = 1;
initBoard(boardID, xMin, xMax, yMin); // For equally scaled, don't define yMax
doGrids = 0;
axes(2,2,"labels",2,2);
stroke = "#165a71";
strokewidth = 2;
// Create an array of points
ptsArr = [ [0,0], [3,2], [5,1], [5,6]];
id = "poly";
polygon(ptsArr,id)
})();
}
補助関数として次の loadScript関数 を定義する。
function loadScript(t,e){
var a=document.createElement("script");
a.type="text/javascript",a.defer=!0,a.readyState?a.onreadystatechange=function(){
("loaded"==a.readyState||"complete"==a.readyState)&&(a.onreadystatechange=null,e&&"function"==typeof
e&&e())}:a.onload=function(){e&&"function"==typeof e&&e()},a.src=t,document.head.appendChild(a)
}
最後に doGraphs() を実行する
document.addEventListener("DOMContentLoaded", function () {
loadScript("../js/ASCIIsvg-IM-2020-01-14.min.js", function () {
doGraphs();
});
});