グラフ描きたい・・・！Webで（詰んだ）
- HTML苦手
- CSS苦手
- JavaScript苦手
d3.js
苦手といっても何か使えるものはないか？ということで、探してみたのがd3.js。こいつjQueryみたいなセレクタで要素を選択したりもできるし、グラフ描いたりもできるとは…。素敵だ。
TypeScript
言わずと知れた、C#の父のアンダーズ・ヘルズバーグが開発してるaltJSシリーズの言語。こいつなら・・・！と思って以下のページを流し読みして書いてみたらとてもいい！なじむ！
module Hoge {
export class Foo {
constructor(public x: number, public y: number) {}
hoge(callback: (result: number) => void): void {}
}
}
みたいな感じで書けるじゃないですか。素敵。しかもCtrl + Spaceも効く。JavaScriptのライブラリも追加の型の定義を書いてやれば普通に使える・・・！いいね！
とりあえず
使わなきゃいけない内部のJavaScriptライブラリのd.tsファイルを作った。Ctrl + Spaceで補完効くようになったのでストレスが1つ減った。
d3.js
このライブラリは、チュートリアルが秀逸なので、やりたいと思った人はここからスタートするといいと思います。
事例集を見てると、これをWebでやってるのか！？変態（ほめ言葉）と思うようなのばっかりなのですが…。
TypeScriptで使う
Visual Studio 2013用のTypeScriptの最新版を入れます。現時点では9.5。早く1.0欲しいですね～。
そしてTypeScriptのプロジェクトを作って以下の2つをNuGetでインストール。型定義がきちんとあるのはメジャーなライブラリの強みですね。
お試し
app.tsを以下のような感じにしてみた。0～100の値を0～50の間に収まるように変換して画面にdivタグを使って表示してます。（グラフのスケーリングで、この値の変換使う）
window.onload = () => {
var r = d3.scale.linear().domain([0, 100]).range([0, 50]);
d3.select("body")
.selectAll("datas")
.data([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100])
.enter()
.append("div")
.text(d => JSON.stringify({ original: d, scaled: r(d) }));
};
HTMLは、こんな感じ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>TypeScript HTML App</title> <link rel="stylesheet" href="app.css" type="text/css" /> <script src="Scripts/d3.v3.min.js"></script> <script src="app.js"></script> </head> <body> </body> </html>
実行結果のHTMLは以下のような感じになりました。
<html lang="ja"><head> <meta charset="utf-8"> <title>TypeScript HTML App</title> <link href="app.css" rel="stylesheet" type="text/css"> <script src="Scripts/d3.v3.min.js"></script> <script src="app.js"></script> </head> <body> <div>{"original":0,"scaled":0}</div><div>{"original":10,"scaled":5}</div> <div>{"original":20,"scaled":10}</div><div>{"original":30,"scaled":15}</div> <div>{"original":40,"scaled":20}</div><div>{"original":50,"scaled":25}</div> <div>{"original":60,"scaled":30}</div><div>{"original":70,"scaled":35}</div> <div>{"original":80,"scaled":40}</div><div>{"original":90,"scaled":45}</div> <div>{"original":100,"scaled":50}</div> </body> </html>
いい感じ。グラフとか描けるように使ってみよう。
