かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

TypeScriptとd3.js

グラフ描きたい・・・!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>

いい感じ。グラフとか描けるように使ってみよう。