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 …

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

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

気になるD3.jsサンプル

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

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

参考(というかほぼそのまま) 【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) 目次1 コントロール用のグラフ領域を作成する2 brushを宣言する3 選択領域用のre …

Inkscapeでsvgのグラデーションとフィルターを作成してみた

    Inkscapeといえば無料で使えるきれいな線がかけるソフトという認識 SVGを勉強しているとそのフィルタエディタがとても便利だった 参考にしたページ www.atmark …