SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

07
--
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図を作成する (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) | - | - |
D3.js v4でTree図を作成する (1)
0

    D3.js が Ver.4 にアップデートしていろいろなところが変わりましたが、Treeレイアウトの作成方法もその1つです。この変更によって、残念ながら Ver.3 でのTreeレイアウトのプログラムは Ver.4 では動作しなくなってしまいました。

     

    さらに困ったことに、Ver.4 でTreeレイアウトを作成しようとしても、簡単なサンプルがなかなか見当たらないのが現状です (特に日本語では) 。例えばインターネットを検索すると「d3.js version4でシンプルなTree図を作成」という記事も見つかるのですが、ノードどうしを線でつなぐ部分の関数が複雑だったり、コードの説明がほとんどなかったりして、おそらくD3.jsを学びはじめた人にとってはハードルが高そうです。

     

    そこで、D3.js Ver.4 を使って、ごくごくシンプルなTree図を作成するサンプルプログラムを作ってみました。コードの中にも簡単な説明を入れましたが、それぞれの関数について次回紹介したいと思います。

     

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | D3.js | 21:06 | comments(0) | - | - |
    プルダウンメニューを使ってインタラクティブに散布図を更新
    0

      前回・前々回の2回にわたって、D3.jsを使ってCSVデータから散布図を作成する方法と、x,y軸のスケールをデータにあわせてインタラクティブに変更する方法を、それぞれ紹介しました。今回はこの2つの方法を合体させて、ユーザがプルダウンから選択した変数によって散布図が自動的に変化するページを作ってみます。

       

      読み込むデータとしては、再びIrisデータセットのCSVファイルを使います。このIrisデータセットには4個の変数が含まれています。そこで、この4個の変数から2つをユーザがプルダウンメニューから選択すると、それに従って画面上の散布図が変化するようにしてみました。

       

      Javascriptファイルの78行目までは、前々回にお話したCSVデータから散布図を作成するプログラムとほぼ同じです。違っている部分は、18,19行目でそれぞれプルダウンメニューのDOM要素を選択している部分です。81~88行目は、これら選択されたDOM要素 (プルダウン) が変更されたときに散布図を更新するためのコールバック関数を呼び出している部分です。

       

      91行目以降は、このコールバック関数の処理内容です。100~127行目までは x,y軸を更新する部分で、基本的には前回ご紹介した内容と同じです。130行目以降では、プルダウンで選択された変数によって散布図上のデータ点の位置を変更する処理です。

       

       

      JUGEMテーマ:JavaScript

      このエントリーをはてなブックマークに追加
      | アニメーション | 22:50 | comments(0) | - | - |