Backbone.js D3.js Railsで使えるGem RubyOnRails

Rails3.2からBackbone.jsとD3.jsを使う一例

投稿日:

Backbone.jsからD3.jsを使う

d3.jsで力指向グラフを使って遊ぶ2のクラス構成でいけた

今のところattrとかonとかのメソッドだけ抽象化したクラスを作って継承させてる

text

rect

グループ化

 

コレクションデータはいちいち渡すのが面倒だったので、ネームスペースのルート直下に名付けてグローバル化したら便利だった

これで、コレクションの変化にイベントを設定すれば、

 

Viewの階層を深くしても、そこからコレクションを操作するだけでイベントに着火できる

削除

stackoverflow.com/questions/6280553/destroying-a-backbone-model-in-a-collection-in-one-step

 

フィルターをクラスにして使ってみた例

RailsのネストしたURLでBackboneを使う

要件

  • ForceモデルとNodeモデルは一対多の関係にある
  • Forceコントローラのshowアクションで関連するNodeのデータを操作したい

showアクションからだけBackboneをスタートさせる

show.js.html

 

コントローラでjsフォーマットを使えるようにして

show.js.coffee

関連するデータだけ操作できるようにする

backboneのコレクションのurlはこんな指定にした

 

routes.rb

 

nodes_controller.rb

インデックスアクションは関連するものだけにしておく

 

 

Backbone.jsのことが30pくらい載ってた

 

Ideas About the Future of D3 and Related Technologies

Data visualization with d3.js, coffeescript and backbone.js

 

D3 + Backbone

=

Reusable Charts

 

github.com/adroll/backbone.d3

-Backbone.js, D3.js, Railsで使えるGem, RubyOnRails
-,

執筆者:

関連記事

RubyでWikiをはじめる〜gollum

目次1 環境2 インストール3  ハロー Gollum4 Powでつかう5 情報 環境 Ruby 2.1.0 Mac OSX Mavericks インストール 自分の環境ではこれをいれとかないとインス …

no image

Mongoidのandとorで悩み中

and

or

  orの方はハッシュで[crayon-5c …

no image

Rails3.2で関連するモデルのフォームをあわせて表示~accepts_nested_attributes_for & fields_for

Railsで関連するモデルのフォームを表示するメモ またハマったので手順をメモ 目次1 Model2 View3 Controllerでもどこでも Model [crayon-5ce26cdf8012 …

no image

Rails3部分テンプレートとAjax化のまとめ

参考 guides.rubyonrails.org/layouts_and_rendering.html#using-partials また混乱したので公式を参考にして書き直しました 目次1 部分テン …

Rails3.2+Mongoidでログイン機能~devise

  目次1 Gemfile2 generate3 model4 試す5 Login/Logout6 アクセス制限7 メニュー構成を整える8 翻訳 I18n9 見た目を整える Gemfile …