LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

10
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.js v4でTree図を作成する (1) | main | D3.js v4でTree図を作成する (3) >>
D3.js v4でTree図を作成する (2)
1

前回は、D3.js Ver.4を使って簡単なツリー図を作成してみました。そのなかでいろんな関数が出てきましたが、それらはいったい何をしているのでしょうか。ちょっと覗いてみることにしましょう。

 

ツリー図を作成するうえで、ポイントとなるのは次の4行です。

 

// Treeレイアウト
var treemap = d3.tree()
.size([width, height]);
// 階層データの前処理
var rootNode = d3.hierarchy(treeData);
// ノード描画用のデータ
var nodes = treemap(rootNode);
// ノード間を結ぶパス描画用のデータ
var links = nodes.links();

 

最初の d3.tree().size([width, height]) は、描画領域の幅 (width) と高さ (height) にあわせてツリー図を作成するためのメソッドです。次の d3.hierarchy(treeData) は、JSONのような階層構造をもつデータをパースするための関数です。パースした後のオブジェクト rootNode を、先ほど準備した treemap() 関数に入れると、D3.js が自動的に各ノードの x,y 座標を計算して、階層の深さなどの情報とあわせたオブジェクトを返してくれます。ちょっと試しに console.log() を使って変数 nodes を見てみましょう。

 

 

SVG描画領域の幅と高さにあわせて、各ノードの x,y 座標や階層の深さ (depth) の情報が入っているのがわかります。次にこのオブジェクトに .links() メソッドを適用すると、ノードとノードを結ぶエッジの情報を含む構造体が返ってきます。こちらも console.log を使って中身を覗いてみましょう。

 

 

オブジェクトのなかに、エッジの両端 (sourceとtarget) それぞれの x,y 座標が入っているのがわかります。

 

前回のプログラムでは、こうして得られた x,y 座標の情報をもとに、SVG上で円とパスを配置してツリー図を作成していたというわけです。

 

ただ、これだけだとなんとも味気ないツリー図なので、次回はこのツリー図にいろいろと手を加えてみることにします。

 

 

JUGEMテーマ:JavaScript

このエントリーをはてなブックマークに追加
| D3.js | 21:56 | comments(0) | - | - |
スポンサーリンク