LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

04
--
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
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.js v4 によるパイチャートの描画 (1) | main | D3.js v4でオリジナルのカラーマップを作成する方法 >>
D3.js v4 によるパイチャートの描画 (2)
0

    前回は、d3.arc() メソッドを使ったパイチャートの作成方法について説明しました (D3.js v4 によるパイチャートの描画 (1)) 。ただ、前回は簡単のためにアークの開始角度を固定していました。そこで今回は、アークの開始角度と終了角度の両方をデータにあわせて設定できるようにして、より現実的なパイチャートにしてみましょう。

     

    せっかくなので、前回と同様にパイチャートと数字が変化するようにしてみました。ただ、今回はアークの数が複数になっているので、変化前の状態を保持しておくために each() メソッドを使ってデータを保持しておくようにしています (55行目など) 。

     

    JavaScriptのソースコードを確認するには、下記の "JavaScript" タブをクリックして下さい。

     

     

     

    過去の関連記事

    D3 v4 によるパイチャートの描画 (1)

    D3による円グラフの描画

     

    JUGEMテーマ:JavaScript

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