グラフ描きたい・・・！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><htmllang="ja"><head><metacharset="utf-8" /><title>TypeScript HTML App</title><linkrel="stylesheet"href="app.css"type="text/css" /><scriptsrc="Scripts/d3.v3.min.js"></script><scriptsrc="app.js"></script></head><body></body></html>
実行結果のHTMLは以下のような感じになりました。
<htmllang="ja"><head><metacharset="utf-8"><title>TypeScript HTML App</title><linkhref="app.css"rel="stylesheet"type="text/css"><scriptsrc="Scripts/d3.v3.min.js"></script><scriptsrc="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>
いい感じ。グラフとか描けるように使ってみよう。