D3.js

Tree図をいろいろ試してみる~d3.js

投稿日:

 

前提

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

これで取得してきたJSONを使っていろいろ試してみた

と言っても、まだ指定のJSONを置き換えただけ

tree.js

cssでフォントの指定を20pxくらいにしてある

さすがに見づらい

tree-radial.js

 

tree-interactive.html

おお、ちょっといい感じかも

コントロールとするには場所とりすぎだし、全体と要素の関係を示すにはもう少し抽象化した(つまり要素を少なくした)方がいいかもしれない

-D3.js
-

執筆者:

関連記事

no image

d3.jsで力指向グラフを使って遊ぶ2

力指向グラフ(force layout)でノードの追加・削除をやってみた     緑のボックスをダブルクリックで追加・グレーのボックスをダブルクリックで削除 Backbone.js …

no image

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

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

d3.jsで棒グラフを作成する

  前提 SVGでビジュアライゼーションことはじめ~d3.js   目次1 データの数だけ棒を表示する2 scale3 テキストラベルをつける4 JSONで読む データの数だけ棒を …

no image

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

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

D3.jsでマウスオーバーでオブジェクトをちょっと明るくする

D3にはd3.select(this)という便利なイディオムがあるのです 色はd3.rgbというオブジェクトにすると、brighter …