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

執筆者:

関連記事

WindowsのRubyでxlsxファイルを生成する~axlsx

By: Roman Boed – CC BY 2.0 目次1 axlsxのインストール2 hello axlsx3 サンプル4 参考 axlsxのインストール コマンドラインからインストー …

Rails3.2のproduction環境で動画再生~flowplayer+carrierwave+nginx+unicorn

  By: Creative Tools – CC BY 2.0 目次1 前提2 unicornの設定3 nginxのインストール4 nginxの設定5 アセット関係6  ストリ …

no image

kaminari + Twitter Bootstrap2テーマでFirst,Prev,Next,Lastだけおかしい場合

前につくったTwitter Bootstrap2用のkaminariテーマをコピーして使おうとしたら表題の通り、First,Prev,Next,Lastがおかしい あと…も表示されない G …

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

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

Rails3.2でコードのお作法を指摘してもらう~Rails Best Practices

コードのお作法を自動でチェックしてくれるrails_best_practiceを導入した

あとは、Railsのルートで[crayon- …