D3.js 要素の作成から擬似グラフの作成まで

  • このエントリーをはてなブックマークに追加

はじめに

D3.js 入門の為に自分用に残した覚書です。
http://ja.d3js.info/alignedleft/tutorials/d3/
こちらにある スコット・マレイ氏による D3 チュートリアルを参考にしています。

基本的なD3.jsの概要を簡単に言うと

グラフ描画用にわかりやすくデータを渡すから描画とかスタイルは全部自分でやってね★

まあ、何事も技術をつけていくと、初期のデザインテンプレートとかフォーマットなども自分好みにカスタマイズした方が早いし利便性高いですよね。
Chart.jsとか他にも色々あるけどここまで玄人志向のものはないかと。。。(手を出して後悔した感満載)

テキストの追加

d3.select("body").append("p").text("新しいパラグラフ!");
[ d3. ]
D3オブジェクトへの参照 //D3関連のものはほぼすべて最初に書く。おまじない的な?
[ .select() or .selectAll() ]
どの要素に対してD3の参照を行なうか。 / 複数選択の場合は [ .selectAll ]
[ .append(‘p’) ]
[ .select ]で参照した要素に新規要素を追加する
[ .text(‘新しいパラグラフ’) ]
[ .append(‘p’) ]で追加した新規要素に指定の文言を表示する

セレクションの作成

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("新しいパラグラフ!");
[ .data() ]
データの値の個数を数え解析する。使用するデータをここに指定します。
[ .enter() ]
[ .data() ] で追加したデータをバインドしたものを次のメソッドチェーンに受け渡す。//このあとのチェーンがデータ文だけ繰り返す。

データの取り出し方法

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text(function(d) { return d; });
[ function(d) { return d; } ]
[ .data() ] で追加したデータをバインドしたものを値を無名関数として取得できるので引数dで取得→出力
http://ja.d3js.info/alignedleft/tutorials/d3/using-your-data/ がわかりやすい。

グラフの描画

ここではわかりやすく簡易的に divを用いてテスト

d3.select("body").selectAll("p")
        .data(dataset)
        .enter()
        .append("div")
        .classed("bar", true)
        .style("height", function(d) {
            return d*5+ "px";
        });
[ .classed(“className”,true) ]
appendした要素に対してクラスを追加。(false)でクラス削除

まとめ

See the Pen D3.js 要素の作成から擬似グラフの作成まで by Yoshifumi Nishimoto (@3aworks) on CodePen.

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。