使用d3画饼图

最近在学习d3,先从一个简单的饼图开始吧！

原理基本很简单，

整合数据，让数据可以适合d3来画饼图，

 // 模拟数据
 var dataset = [
                   {name: '购物', value: 983},
                   {name: '日常饮食', value: 300},
                   {name: '医药', value: 1400},
                   {name: '交通', value: 402},
                   {name: '杂费', value: 134}
               ]; 
// 转换原始数据为能用于绘图的数据
               var pie = d3.pie()
                       .sort(null)
                       .value(function(d) {
                           return d.value;
                       });

转换前数据

转换后数据

可以看到d3会对你的数据进行一些处理。 2. 然后就是画圆弧，

// 创建计算弧形路径的函数
                var radius = 100;
                var arc = d3.arc()
                        .innerRadius(0)
                        .outerRadius(radius);

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>饼图</title>
        <style>
            .container {
                margin: 30px auto;
                width: 600px;
                height: 300px;
                border: 1px solid #000;
            }
            polyline {
                fill: none;
                stroke: #000000;
                stroke-width: 2px;
                stroke-dasharray: 5px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <svg width="100%" height="100%"></svg>
        </div>
        <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
        <script>
            window.onload = function() {
                var width = 600, height = 300;
                // 创建一个分组用来组合要画的图表元素
                var main = d3.select('.container svg').append('g')
                        .classed('main', true)
                        .attr('transform', "translate(" + width/2 + ',' + height/2 + ')');
                // 模拟数据
                var dataset = [
                    {name: '购物', value: 983},
                    {name: '日常饮食', value: 300},
                    {name: '医药', value: 1400},
                    {name: '交通', value: 402},
                    {name: '杂费', value: 134}
                ];
                // 转换原始数据为能用于绘图的数据
                var pie = d3.pie()
                        .sort(null)
                        .value(function(d) {
                            return d.value;
                        });
                console.log(dataset);
                // pie是一个函数
                var pieData = pie(dataset);
                console.log(pieData);
                // 创建计算弧形路径的函数
                var radius = 100;
                var arc = d3.arc()
                        .innerRadius(0)
                        .outerRadius(radius);
                
                var slices = main.append('g').attr('class', 'slices');
                // 添加弧形元素（g中的path）
                var arcs = slices.selectAll('g')
                        .data(pieData)
                        .enter()
                        .append('path')
                        .attr('fill', function(d, i) {
                            return getColor(i);
                        })
                        .attr('d', function(d){
                            return arc(d);
                        });
            };
            
            function getColor(idx) {
                var palette = [
                    '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
                    '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
                    '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
                    '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
                ]
                return palette[idx % palette.length];
            }
        </script>
    </body>
</html>

运行结果

使用版本 d3 (d3js.org/d3.v4.min.j…)；测试浏览器

（以后本博客中所有d3 都会基于现在的环境）

d3 饼图圆环图

使用d3画饼图