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でajaxなフォルダツリーを導入する~dynatree-rails

  jQuery UIのプラグインdynatreeをRailsで使ってみた github.com/glebtv/dynatree-rails wwwendt.de/tech/dynatree …

no image

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

Rails3.2でユーザー管理機能を追加~Devise

By: Mark Strobl – CC BY 2.0 目次1 前回2 generate3 routes.rb4 index.html.erb5 new6 create7 edit8 up …

Backbone.jsからjQuery UIのDialogを使う例

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …

d3.jsで力指向グラフを使って遊ぶ~force layout & zoom & pan

参考 D3をはじめよう 参考 Force Layout 目次1 forceレイアウトのスケルトン2 zoom&pan forceレイアウトのスケルトン forceレイアウトではオブジェクトに力が作用し …