D3.js の force layout を試してみる - 雑食性雑感雑記
概要 D3.js で Force layout を動かしてみる。 理解用に簡単なサンプルを作る。 その他、オプションを試してみる。 ラベル表示と矢印を追加。 情報 D3.js って…？ 日本語サイト D3 = Data Driven Document データに基づいてドキュメント (要は DOM) を操作するための Javascriptライブラリ。 svg を使った華麗なグラフのデモが目立つが、DOM操作のライブラリとしても優れている (と、使ってみて思った)。 Force layout force = 『力』とか『エネルギー』とか。 スターウォーズのアレ？？ 要素同士が影響し合っている状態を node (円) と link (線) で表している。 説明よりもサンプル見た方が早い。 Force-Directed Graph 作ったサンプル jsdo.it 上に置きました。 作り方とかは以下
d3.js超初心者向け ①→②を表現してみる - Qiita
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。
Textures.js
SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines
Textures.js - SVGをパターンで塗りつぶし MOONGIFT
SVGはWeb上でベクターグラフィックを表現するのに適した手法です。Flashのように外部プラグインはいらないですし、拡大/縮小しても綺麗なのでどんなデバイスの画面サイズにも対応できます。 そんなSVGの表現力をあげるのに適したライブラリがTextures.jsです。多数のパターンを使って塗りつぶし処理を行います。 Textures.jsの使い方 デモです。線は素のSVG（d3.js）で描いて、その内容をTextures.jsで描いています。 ライン系。 色の変更もできます。 線を細くしたり、間隔を調整するのも簡単にできます。 サークル、ドット系。 こういう特定のパスを描くことも、自分でカスタマイズすることもできます。 SVGで描いているとついベタ塗りになってしまいがちですが、さらにその描画内容をパターンで描けるようになるとカラーだけでなく、グレースケールで表現した際にも分かりやすくなりそ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
