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
-,

執筆者:

関連記事

Rails3.2でフォームの順番をjQuery UI sortableで並べ替えてSubmit~acts_as_list

no image

RubyでDocxを分解してみた~Nokogiri::XML::SAX

    参照 Rubyでdocxをいろいろ分析してみた 今度はsaxのアプローチでdocxのword/document.xmlを分解してみた 使い方は、Nokogiri::XML: …

ActiveRecord使い方まとめ

By: North Carolina National Guard – CC BY 2.0 ActiveRecord入門|ドットインストールをみて個人的まとめ ActiveRecord4の …

Backbone.jsのためにRails3.2でJSON APIをつくる~RABL

RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

環境 ruby 1.9.3  & rails 3.2.8 適当なscaffoldを作っておく

  github.co …