D3.jsの基本コピペ用コード(コードスニペット)

Pocket



先日ふとしたきっかけでD3.jsのことを知りました。
こちらのサイトを一通り読んで動かして基本を理解したので、
忘れないうちにコピペ用コード(コードスニペットって言うんだっけ?)を残しておきたいと思います。
なお、ここに書いているのはそれぞれの項のポイントになる部分コードです。全体を確認したい場合はサンプルページを開いてソースを見てください。
2016/11/05追記
大きな数をd3.maxで扱おうとすると、正しい最大値を返さないケースがありますので、大きい数を扱う時のコードを書き足しました。
ちなみに、回避用コードはこんな感じです。
「Math.max.apply( null, dataset.map( function( d ){ return d.param ); } ) )」

D3の基本

と、その前に「D3.jsってなんぞ?」って方は以下を一読いただけると良いかと思います。
wikipedia
D3 チュートリアル(スコット・マレイ)

SVG要素の仕様について

SVG要素の仕様については、Scalable Vector Graphics (SVG) 1.1 (第2版)をご覧ください。
また、SVG要素fillとstrokeについてはこちらをご覧ください。

jsonファイルのロード

外部にjsonファイルを格納しておいて、それをロードして使いたい時はこんな感じ

サンプルページへ

csvファイルのロード

外部にcsvファイルを格納しておいて、それをロードして使いたい時はこんな感じ

サンプルページへ

余白を指定してsvg要素を追加する

「id:hoge」に余白を指定してsvg要素を追加する時はこんな感じ。

サンプルページへ

最大値を指定してX軸を描画する

SVG要素を追加した後、最大値を指定してX軸を描画するには以下のようにします。

サンプルページへ

最大値を指定してX軸を描画する(X軸が日付のパターン)

SVG要素を追加した後、最大値を指定してX軸を描画する(X軸が日付のパターン)には以下のようにします。
日付のフォーマットの指定の仕方はこちらを参照してください。

サンプルページへ

最大値を指定してY軸を描画する

SVG要素を追加した後、最大値を指定してY軸を描画するには以下のようにします。

サンプルページへ

最大値を指定してX軸-Y軸を描画する

SVG要素を追加した後、最大値を指定してX軸-Y軸を描画するには以下のようにします。

サンプルページへ

X軸-Y軸を通常とは逆の位置に描画する

SVG要素を追加した後、X軸-Y軸を通常とは逆の位置に描画するには以下のようにします。

サンプルページへ

X軸-Y軸の単位を描画する

SVG要素を追加した後、X軸-Y軸の単位を描画するには以下のようにします。
単位を表示する際に重要なのは、.call( (x or y)Axis )の後の.append( ‘text’ )以降です。

サンプルページへ

グリッド線を描画する

SVG要素を追加した後、X軸-Y軸に加えてグリッド線を描画するには以下のようにします。
「.tick line」でcssをあてて、javascriptは「xAxis」と「yAxis」に「innerTickSize」をマイナス指定するのがポイント。「outerTickSize」「tickPadding」はおまけ。

サンプルページへ

X軸-Y軸を装飾する

X軸-Y軸の軸線を消したり色を変更するのは、cssでfillとstorokeを指定します。

サンプルページへ

単純な折れ線グラフを描画する

これまで作ったX-Y軸上に折れ線グラフを表示するには以下のコードを追加します。console.log()でline関数で使った数字をコンソールに表示するようにしてあるので、そちらも参考にしてください。

サンプルページへ

補完モードを指定して単純な折れ線グラフを描画する

SVG要素を追加した後、補完モードを指定して単純な折れ線グラフを描画するにはline関数にinterpolate( text )を指定します。
interpolate()に渡すことができるパラメータは、ドキュメントのline.interpolateを参照してください。

サンプルページへ

アニメーションしながら単純な折れ線グラフを描画する

SVG要素を追加した後、アニメーションしながら単純な折れ線グラフを描画するには、attrTween()を使います。
とかいかにも理解している風を装っていましが、こちらのサイトのコードそのまんまです。
公式ドキュメントにも目を通したのですが、英語も苦手なのでさっぱりです。

サンプルページへ

折れ線グラフに散布図を重ねて描画する

これまで作ったX-Y軸上に折れ線グラフを表示し、さらに散布図重ねてを描画するには以下のコードを追加します。console.log()でline関数で使った数字をコンソールに表示するようにしてあるので、そちらも参考にしてください。

サンプルページへ

折れ線グラフに散布図を重ねて表示し、データの説明用テキストを描画する

これまで作ったX-Y軸上に折れ線グラフと散布図を表示し、さらにそれぞれのポイントに説明用のテキストを描画には以下のコードを追加します。console.log()でline関数で使った数字をコンソールに表示するようにしてあるので、そちらも参考にしてください。

サンプルページへ

折れ線グラフとデータの各ポイントに棒グラフを重ね、さらにそれぞれのポイントに説明用のテキストを描画する

これまで作ったX-Y軸上に折れ線グラフに棒グラフを重ね、さらにデータポイントとそれぞれのポイントに説明用のテキストを描画するには以下のコードを追加します。console.log()でline関数で使った数字をコンソールに表示するようにしてあるので、そちらも参考にしてください。

サンプルページへ

2軸の折れ線グラフを描画する

2軸の折れ線グラフを描画するには以下のコードを追加します。
といっても難しいことはありません。普通にグラフを作った後、以下のようにさらに一本分の処理を追記するだけです。

サンプルページへ

jQueryと共存する

D3.jsのことを知って真っ先に思い浮かんだのがこれです。グラフ部分でD3.jsを使おうと思っても、jQueryと競合しちゃうんじゃ使うに使えないですしね。
って言っても特に問題無く使えるみたいなんですが、一応使いわけておきたいと思います。

せっかくなので、D3.jsで描画したグラフ(折れ線グラフと散布図)上の各ポイントにマウスを乗せた際に、jQueryのpowertipプラグインで吹き出しを表示するサンプルを作りました。何かの参考になれば幸いです。

サンプルページへ

基本的なところはこれくらいだと思う

これだけコピペ用のコードがあれば普通のグラフを描画する分には困らないかな?
地図表示なんかはまだ手を出してないので、ある程度身についたところでまとめたいと思います。

コメントを残す

メールアドレスが公開されることはありません。