D3.js 3.5.9

■D3.js はじめました　[ サンプルページの表示 ] Top　Next
関連ページ：

今回から D3.js はじめます。といってもあっという間に終わるかもです。
というのは日本語翻訳サイトがあってそこ参考にしてるだけだからです。ぶっちゃけ自分向けにメモ用として作成しただけですので詳しくは解説しません。
でその参考にしたサイトはD3チュートリアルです。

まず Web 上でグラフィックス表示を行う場合 <canvas>タグ と <svg>タグ の２種類の方法があります。それぞれについておおざっぱに解説します。

■<canvas>タグ
ピクセル ベースで描画し、小さな表面、多数のオブジェクト (10,000 以上)、またはその両方で高いパフォーマンスを発揮する。WebGLではこれ使う。

■<svg>タグ
図形ベースで描画し、少数のオブジェクト (10,000 未満)、大きな表面、またはその両方で高いパフォーマンスを発揮する。D3.jsではこれ使う。

SVG と Canvas: どちらを選ぶかより

次に D3.js についてです。
D3.js はデータに基づいてDOMを操作するための JavaScript ライブラリです。DOMを操作するだけなので描画は行いません。描画を行うのはあくまで SVG です。
またグラフ描画ライブラリでもありません。SVGで描画するためのコーディングは自分で行います。まあこの辺は実際にソース見たほうがイメージわくと思います。

さて、開発環境を構築します。といっても必要な作業は D3.js のダウンロードだけです。下記のサイトから D3.js ライブラリをダウンロードして展開し、自前のサイト上の適切なパスに置きます。

データ・ドリブン・ドキュメント

とりあえずD3.js使ってみます。
html の内容はサンプルページを見ていただくとして、スクリプトはTypeScriptを使用するため、下記のソースを Playground でJavaScriptコードにコンパイルして使用してください。

---javascript02.ts--- 

function show02()
{
   d3.select("body").append("p").text("新しいパラグラフ!");
}
Top　Next
inserted by FC2 system