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

執筆者:

関連記事

no image

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

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

Backbone.jsとjQuery Mobileを一緒に使うためのリンクメモ

  By: Rick Turoczy jQuery Mobileの公式から jQuery Mobile, Backbone.js and Require.js 一例だけどエレガントなのはjQ …

気になるD3.jsサンプル

Hierarchical Bars バーをクリックするとその内訳がまたバーチャートになる         Collapsible Indented Tree 開閉できる階 …

ActiveRecord使い方まとめ

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

no image

d3.jsでグラフ描画するときの枠組み作成のメモ

前の記事 svgでビジュアライゼーションことはじめ~d3.js svgで棒グラフを作成する~d3.js Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize Tree図をい …