LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

08
--
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による円グラフの描画 | main | D3.jsを使ったCSVファイルの読み込み >>
D3.jsによるパイチャートの描画
0
    JUGEMテーマ:JavaScript

    前回の記事ではD3.jsを使って円グラフを描いてみました。そのなかで、円グラフのサイズを指定する部分で

    var arc = d3.svg.arc().innerRadius(0).outerRadius(100);

    という一行が出てきたかと思います。ここでカンのいい方ならピンときたかもしれません。そう、innerRadius()メソッドのことです。ご想像の通り、これは円グラフの中央で白抜きにする円の半径を示しています。ここをゼロ以外の値に設定すると、データの各要素の割合を円弧の長さで示したパイチャートを作成することができます。

    ■sample.js
    var dataSet = [40, 30, 15, 10, 5];
    
    // D3.jsが用意する標準10色
    var color = d3.scale.category10();
    
    // SVGの表示領域を生成
    var svg = d3.select("#MyGraph")
      .append("g")
      .attr("transform", "translate(" + 150 + ", " + 150 + ")");
    
    // 円グラフを生成
    var pie = d3.layout.pie()
        .value(function(d){ return d; });
    
    // 円グラフのサイズを指定
    var arc = d3.svg.arc().innerRadius(40).outerRadius(100);
    
    // 円グラフを描画
    svg.selectAll("path")
        .data(pie(dataSet))
        .enter()
        .append("path")
        .attr("d", arc)
        .attr("stroke", "white")
        .style("fill", function(d,i){
          return color(i);
        })
    
    // 各円弧に数値を表示    
    svg.selectAll("text")
      .data(pie(dataSet))
      .enter()
      .append("text")
      .attr("transform", function(d){
        return "translate(" + arc.centroid(d) + ")";
      })
      .text(function(d){
        return d.value;
      })
      .attr("dx", "-5");
      
    // 中央に合計値を表示
    svg.append("text")
      .text("合計:" + d3.sum(dataSet))
      .attr("dy", "5")
      .attr("dx", "-30");
    




    ここではパイチャートを作成するついでに、せっかくなので各円弧にデータの数値を、またパイチャートの中心の空白部分に合計値を、それぞれ表示するようにしました。

    まず、8行目ではgという要素でグループ化したうえで、9行目でパイチャートの中心位置を指定しています。こうしておくと、座標要素もgという要素でまとめられます。これがどう役に立つのかは、後の部分で分かります。

    そのうえで、19行目以降で円グラフを描画しています。注目してもらいたいのは、この19行目から27行目の間では、前回のように「.attr("transform", 〜」を指定していないことです。これは、8行目で既にgという要素でグループ化されているために、19行目以降は、あたかも9行目で指定した (150, 150) が中心座標であるかのように記述できるためです。

    29行目以降では、各円弧にそれぞれの数値を表示させています。それぞれの数値を表示させる位置を一つ一つ指定するのは大変ですが、ありがたいことにD3.jsでは arc.centroid()というメソッドがあらかじめ用意されています。これは、各円弧 (アーク) の重心位置の座標を返してくれる関数です。これを使って、各円弧の重心位置に各要素の値 (d.value) を表示するようにしています。ただ、単純に重心位置を指定したのではテキストが各円弧の中心の若干右側に表示されてしまうため、40行目で表示位置の微調整をしています。

    43行目以降では、パイチャートの中心に「合計:100」と表示させるためにテキスト要素を追加しています。ここではd3.sum()という配列の合計値を返すメソッドを使っています。最後に45〜46行目で表示位置を微調整しています。

    次回はアニメーションを使って、ダイナミックに動くグラフを作成してみましょう!

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