読者です 読者をやめる 読者になる 読者になる

spring of life

技術、ときどき日常のブログ(予定)

RailsとD3.jsを組み合わせる

D3.jsはブログ初登場かな?

D3.jsはデータを可視化する時に使うjavascriptライブラリで、汎用性がめちゃくちゃあるけど使いこなすのに時間がかかるっていうやつ

github.com


これをRailsアプリといっしょに使ってみた。だいたいこんな感じ

1. 可視化するデータを取得

  • WebページにアクセスされるとRailsがデータを取得する
  • ここは普通にRailsActiveRecordとか使ってDBからデータを取得すればOK
  • データ型は配列でも配列の配列でもハッシュでもOK
  • ただD3.jsでの処理はそれぞれちょっと変わるけど
def show
  @data = Model.where(:hoge => 'fuga')
end

みたいな感じで

2. データをビューに渡す

  • 上の例だと@dataに表示するデータが入ってるのでそれを<%= %>とか使って処理する
  • @dataは個人的にはハッシュの方がいいかな〜
  • ただハッシュは使えないのでjsonに直す
var data = <%== @data.to_json %>
  • 普通にto_jsonで文字列にして変数に入れようとすると文字列がエスケープされててエラーになるので注意!
  • なので<%== %>としてエスケープしないようにしている

あとはD3.jsの関数とかいろいろ使って好きにグラフとか作ればOKかなぁ

まぁ概要を書くとこんな感じ

もうちょっと具体的に書いた方が分かりやすいな。。。今度書くか

てかどういうアプリを作ってるかもまとめていつか載せておこうっと