D3 Examples - [D3.js] Pie chart

xxxxxxxxxx
 
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>円グラフ</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <script>
        var dataset = [
            {legend:"apple", value:10, color:"red"},
            {legend:"orange", value:45, color:"orangered"},
            {legend:"banana", value:25, color:"yellow"},
            {legend:"peach", value:70, color:"pink"},
            {legend:"grape", value:20, color:"purple"}
            ];
​
        var width = 960;
        var height = 500;
        var radius = 200;
​
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
        var arc = d3.svg.arc()
                .outerRadius(radius)
                .innerRadius(30);
​
        var pie = d3.layout.pie()
                .sort(null)
                .value(function(d){ return d.value; });
​
        var g = svg.selectAll(".fan")
                .data(pie(dataset))
                .enter()
                .append("g")
                .attr("class", "fan")
​
        g.append("path")
            .attr("d", arc)
            .attr("fill", function(d){ return d.data.color; })
        
        g.append("text")
            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
            .style("text-anchor", "middle")
            .text(function(d) { return d.data.legend; });
    </script>
</body>
</html>
    