読者です 読者をやめる 読者になる 読者になる

fnwiyaBlog

EmacsとかLispとか可視化とか

d3.jsで円グラフを書く(開始アニメーション/ラベルテキスト/色つき)

ネット上にd3.jsの情報はあるのですが、
どの部分で何をしているかわかりにくかったので
まとまりごとコメントをいれてみました。

function drawPie(id, dataset) {
    // コンテナ
    var width = 300,
        height = 200,
        radius = Math.min(width, height)/2;
    var svg = d3.select(id)
            .attr({
                width : width,
                height : height
            })
            .append("g")
            .attr("transform",  "translate(" + width / 2 + "," + height / 2 + ")");

    // パイを定義
    var pie = d3.layout.pie()
            .sort(null)
            .value(function(d) { return d.rate; });

    // 円弧の外径と内径を定義
    var arc = d3.svg.arc()
            .outerRadius(radius - 10)
            .innerRadius(5);

    // データバインド
    var g = svg.selectAll("path")
            .data(pie(dataset))
            .enter()
            .append("g")
            .attr("class", "arc");

    // 描画
    g.append("path")
        .attr("d", arc); // 円弧を設定

    // テキスト
    g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
        .attr("font-size", "8")
        .style("text-anchor", "middle")
        .style("fill", "#fff")
        .text(function(d) { return d.data.age; });

    // スタイル
    var colorArr = ['#E74C3C',
                    '#3498DB',
                    '#2ECC71',
                    '#9B59B6',
                    '#34495e',
                    '#449248',
                    '#652681'];
    g.attr("stroke", "white")    // 円グラフの区切り線を白色にする
        .style({
            fill: function(d, i) {
                return colorArr[i];
            }
        });

    //アニメーション
    svg.selectAll("path")
        .transition()   // トランジション開始
        .duration(1000) // 1秒間でアニメーションさせる
        .attrTween("d", function(d){    // 指定した範囲で値を変化させアニメーションさせる
            var interpolate = d3.interpolate(
                { startAngle : 0, endAngle : 0 },   // 各円グラフの開始角度
                { startAngle : d.startAngle, endAngle : d.endAngle }    // 各円グラフの終了角度
            );
            return function(t){
                return arc(interpolate(t)); // 時間に応じて処理
            };
        });
}

// 円グラフの表示データ
var japanDataset = [
    {base: "日本人人口", age: "25〜29", rate: 0.06633412364}
    ,{base: "日本人人口", age: "30〜39", rate: 0.1620942}
    ,{base: "日本人人口", age: "40〜49", rate: 0.1859880326}
    ,{base: "日本人人口", age: "50〜59", rate: 0.1567057713}
    ,{base: "日本人人口", age: "60〜69", rate: 0.1850232472}
    ,{base: "日本人人口", age: "70〜79", rate: 0.1450872925}
    ,{base: "日本人人口", age: "80〜", rate: 0.09876733278}
];

drawPie("#pie", japanDataset);  //html内に<svg id="pie></svg>と書くとそこにグラフができる