LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

01
--
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で「レ・ミゼラブル」の人物関係を可視化 | main | D3.js v4 によるパイチャートの描画 (2) >>
D3.js v4 によるパイチャートの描画 (1)
0

    以前、このブログで「D3.jsによるパイチャートの描画」という記事を書きました。ところが D3 の v4 へのバージョンアップに伴って、d3.svg.arc() が d3.arc() に変更されたため、以前のコードのままでは v4 でパイチャートを描画できなくなってしまいました。そこで、あらためて D3 v4 を使ってパイチャートを描画してみます。

     

    ただ、前回と同じものを作っても面白くないので、ちょっとだけインタラクティブに動くグラフを作ってみました。

     

    今回のポイントは以下の 3つです。

     

    • d3.arc() によるアークの設定 (20~23行目)
    • attrTween() によるアークの連続的な変化 (66~72行目)
    • tween() によるテキスト表示内容の変化 (56~62行目)

     

    それでは順番に見ていきます (下記のJavaScriptタグやHTMLタグをクリックすると、それぞれの中身が表示されます)。

     

    1. d3.arc() によるアークの設定

    d3.arc() は、円弧の形のPath要素を生成するための関数を生成します。そこに outerRadius(), innerRadius() メソッドによって、それぞれ円弧の外側の半径と内側の半径を指定します。さらに、今回は円弧の開始角度を常に 0度 (時計の12時の位置) に設定するため、startAngle() メソッドで開始角度を指定しています。ウェブブラウザの JavaScriptコンソール上で toString.call(arc) として変数 arc の型を確認すると、関数型になっていることが分かると思います。

     

    2. attrTween() によるアークの連続的な変化

    これまで作成したアニメーションは、円の半径のようなSVG要素の基本的な属性を変更するもので、transition(), duration() などのメソッドで簡単にアニメーションとして表示することができました。ところが今回は円弧のPath要素を連続的に変化させる必要があります。そんなときに使うのが attrTween() メソッドです。

    55行目以降で定義しているgrapUpdate関数が最初に呼び出されたとき、66行目の attrTween() の第1引数 "d" は、31行目でバインドした変数 {endAngle: 2*Math.PI} です。このため、67行目の interpolate() の第1引数は d.endAngle、つまり 2*Math.PI になっています。ちなみに interpolate() メソッドは第1引数と第2引数の間を内挿 (interpolate) するための関数です。

    69行目では、この interpolate() を使って、更新前の角度と更新後の角度の間を連続的にスイープさせて d.endAngle に設定しています。つまり、68行目から71行目全体で、角度を連続的に変更させたPath要素が次々と生成されているわけです。

     

    3. tween() によるテキスト表示内容の変化

    これはパイチャートのアニメーション化に必要というわけではありませんが、せっかくなので使ってみました。

    インタラクティブなデータの可視化をする際、しばしばテキストの表示内容も連続的に変更させたくなることがあります。そのような場合には tween() メソッドが役に立ちます。やっていることは基本的には attrTween() でやったことと同じです。まず interpolate() メソッドで、ある値と別の値を内挿するための関数を作成して (58行目)、それを使って連続的に変化するテキストを生成している (69~61行目) というわけです。

     

     

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | グラフ作成 | 14:10 | comments(0) | - | - |
    スポンサーリンク