パイチャート前回に引き続き今回もd3.jsでのチャートをまとめておく。今回はパイチャートについて。ツールチップSFiddleはこちら弧上に描画するためのarc()とパイ上に配置するためのpie()を用意する。それと配色用のcolor。d3.scale.category10();データをpie()にかませて配置用のデータへと変換する。.append('g');弧を描画する。arc);arc.centroid()を使用すると真ん中の座標が簡単に取得できる。});弧の外側に文字を描画するには三角関数を使用して座標を算出する。text-anchorを角度によって変更している。パイチャートでは90度(Math.PI/2)の位置が0度計算になっているので注意。それなのでxは-する。ツールチップ前回に引き続き今回もd3.jsでのチャートをまとめておく。今回はおもにツールチップ的なものについて。ツールチップ的な部分以外は前回のものとあまり大差ないため省略するので詳細は前回を参照してもらいたい。パイチャートJSFiddleはこちらX軸。今回はtimeを使用している。range()の指定は少しずらすために30からとなっている。.call(xAxis);ツールチップ。});オーバーレイとツールチップの表示場所の指定。チャート上のどこにマウスがあっても表示したいのでオーバーレイはチャート全体を覆っている。mousemove()の冒頭でマウスの現在座標からその位置よりも左側に位置するデータをbisector()で取得している。それだけだとマウスが二つのデータ間にある場合、必ず左側のものが選ばれてしまうのでマウスとデータ間の距離を比較してツールチップを表示するべきデータを取得している。このx.invert()の使用方法はtime()でしか使用できないので注意。linear()の場合(linear()は違うのかも。調査していないので不明)はデータの幅とrange()、マウスの座標から当該のデータを探し出す必要がある(詳細は下記参考を参照してもらいたい)。ラインチャートとバーチャートを2つのy軸上に描画するd3.js周りを調査して、簡易なチャートをいくつか作ったので後々のためにまとめておく。今回は2つのy軸上にラインチャートとバーチャートをプロットする。パイチャートJSFiddleに動作するサンプルをあげてあるので詳細はそちらを参考にしてもらいたいが、簡単に解説しておく。enterの仕組みが理解できていないと一見しても意味不明なコードになるのでチュートリアル的なものをどこかで一読されることをお勧めする。JSFiddleはこちらデータを用意する。];svg要素を用意する。ここでscaleにはordinal()を使用している。他に線形のlinear()と時系列用のtime()が使用できる。domain()に0から売り上げと予想の最大値を指定している。nice()でよさげにtickを調整してもらう。0)は左上をさすため。.text('万円');二つ目のY軸。右端にtransform.translateで移動する。横線を引くためにd3が追加してくれたtickのg要素があるのでそこに横線用のline要素を追加して描画している。.text('%');ラインチャート。二つ目のY軸で高さを算出している。percentLine);バーチャート。一つ目のY軸で高さを算出している。X軸のscaleでrangeRoundPoints()を指定しているおかげでちょうど良い感じの座標が取得できている。ここらへんは色々いじってためしてもらいたい。Japanウェブアプリ、デスクトップアプリ、モバイルアプリ、ゲームなどを開発しています。