APICloud d3.js 画饼图带动画效果

学习文献：http://pkuwwt.github.io/d3-tutorial-cn/adding-elements.html (基础教学)
https://juejin.im/post/5a81a8946fb9a06334266f05 (讲解插值)
https://github.com/pshrmn/notes/blob/master/d3/interpolators.md (解释插值)
今天要学习总结下d3画饼图，先看效果图

饼图.gif

上面是饼图带点击动画的，然后中间的数字可以变化。这里面主要用到d3来实现效果。后面我会贴出我全部的代码

思路流程

创建SVG--->添加g标签元素--->数据转换得到我们需要的数据--->添加path开启动画和画圆--->点击圆让其变大--->数字慢慢增长

创建SVG

    var svg = d3.select('#d3Circle')
                .append("svg")
                .attr("width", sellCircleSVGWid)
                .attr("height", sellCircleSVGhei);

.select表示要选择的函数，append创建SVG，attr用来设置属性值，我这里设置了宽度和高度。我们创建的SVG是一个矢量图的格式可无限放大而不失真。

添加g标签

  var arcs = svg.selectAll("g")
                .data(piedata)//设置数据集，piedata元素集合
                .enter()
                .append("g")//添加g元素
                .attr("transform", "translate(" + sellCircleSVGWid / 2 + "," + sellCircleSVGhei / 2 + ")");

我通过SVG再创建一个g标签，并且让它移动到圆的中心位置
selectAll表示选中所有的g标签元素，但是我们在此之前并没有创建g标签元素，所以通过selectAll会返回一个空的集合给我。data用于设置数据源，piedata集合里面有多少数据，就会创建多少个g标签元素给我。enter()表示创建，append表示添加。
注意！！! piedata 必须是集合参数(我自己总结出来的，我试过几次了，不是集合就不会画图出来)
我们最好是把g标签创建出来，因为g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象。

数据转换得到我们需要的数据

       //创建圆弧生成器
        var arcPath = d3.svg.arc()
                .innerRadius(innerRaidus)
                .outerRadius(outerRadius);
       //创建圆弧生成器
        var arcPath2 = d3.svg.arc()
                .innerRadius(innerRaidus)
                .outerRadius(outerRadius + 5);

        var color = ['#c56b4f', '#e8b63e', '#435fd8'];
        var ptDetail = ["456", "123", "256"];//数据源
        var totalSales = "835";
      //这里数据过滤，拿到需要的数据
        var pie = d3.layout.pie().value(function (d) {
            return d - 0;//将字符串转为数字
        });
        var dataset = [];//数据集合
        for (var k in ptDetail) {
            dataset.push(ptDetail[k] / totalSales);//算出占用量
        }
        dataset.sort(function (a, b) {//从大到小排序
            return a < b ? 1 : -1
        });
        var piedata = pie(dataset);//拿到需要的数据
        //先定义位置
        var sum = 0;
        piedata.forEach(function (d, i) {//定义自己的颜色，执行实时间等
            d.color = color[i];
            d.position = i;
            d.duration = 2000 * (d.data / d3.sum(dataset));//动画时长2秒，计算每一个弧形所用动画时间
            d.delaytime = sum;
            sum += d.duration;
        });

var arcPath = d3.svg.arc().innerRadius(innerRaidus).outerRadius(outerRadius); 创建一个弧生成器，我们把数据传递给它，像这样arcPath(data)，它就会返回一堆路径数据给你，这堆数据用于path上面画圆。
d3.layout.pie().value 主要用于数据过滤，然后内部计算得到开始角度，结束角度

piedata数据转换后的值.png

这里面的data 是原始的数据，startAngle是开始弧度，endAngle是结束弧度。dataset是未进行过滤的数据源

添加path开启动画和画圆

      arcs.append("path")
                .transition()
                .delay(function (d, i) {
                    return d.delaytime;
                })
                .duration(function (d, i) {
                    return d.duration;
                })
                .attrTween("d", function (d, j) {//过度器
                    var i = d3.interpolate(d.startAngle, d.endAngle);
                    return function (t) {
                        d.endAngle = i(t);
                        return arcPath(d);
                    }
                })
                .attr("stroke-width", "2px")
                .attr("fill", function (d, i) {
                    return d.color;
                });

transition()用于开启动画的标志，delay()多少时间后开始执行，duration()多少时间内完成，attrTween()过渡器，这个比较难立即了吧，举一个简单的例子说明

//下面我用书上的例子来展示
        var svg = d3.select('#d3Circle')
                .append("svg")
                .attr("width", 200)
                .attr("height", 180);
   //定义SVG的宽高
        var svg = d3.select('#d3Circle')
                .append("svg")
                .attr("width", sellCircleSVGWid)
                .attr("height", sellCircleSVGhei);

        var rect = svg.append("rect")
                .attr("fill", "steelblue")
                .attr("x", 10)
                .attr("y", 10)
                .attr("width", 100)
                .attr("height", 30);
        var rectTran = rect.transition()
                .duration(2000)
                .attrTween("width", function (d, i, a) {
                    return function (t) {
                        return Number(a) + t * 300;
                    }
                });

attrTween动画.gif

所以我们可以理解为，数字从0到1，慢慢变化的过度。继续上面的讲解
var i = d3.interpolate(d.startAngle, d.endAngle);在d3里面，interpolate解释为插值器的意思，我上面贴的链接也有对这个进行解释，然后我对它的理解如下

interpolate的理解.png

t的取值为[0,1]，我们i就是作为一个函数了，如果我们duration时间很长那么通过i(t)得到的数据也会很多，所以我们过度动画就从0读到endAngle变化了。arcPath(d)拿到数据函数将其转换为路径值，然后赋值给d参数。

点击圆让其变大

 var isClick = false
        arcs.on("click", function (d) {//点击
            d3.select(this).select("path").transition().attr("d", function (d) {
                if (!isClick) {//放大效果
                    isClick = true;
                    return arcPath2(d);
                } else {//还原
                    isClick = false;
                    return arcPath(d);
                }
            });
        });

由于我上面写了2个arcPath，一个用于点击后放大的效果的。

数字慢慢增长

 function CusnumDd(el, param) {
        var sum = 0;
        var time = setInterval(function () {
            sum += 1;
            el.innerHTML = sum;
            if (param <= sum) {
                clearInterval(time);
                el.innerHTML = (param);
            }
        }, 100)
    }

全部代码

<script type="text/javascript">
    $(function () {
        var sellCircleSVGWid = 200;//宽
        var sellCircleSVGhei = 180;//高
        var innerRaidus = 60;
        var outerRadius = 80;

        //定义SVG的宽高
        var svg = d3.select('#d3Circle')
                .append("svg")
                .attr("width", sellCircleSVGWid)
                .attr("height", sellCircleSVGhei);

        /* var rect = svg.append("rect")
         .attr("fill", "steelblue")
         .attr("x", 10)
         .attr("y", 10)
         .attr("width", 100)
         .attr("height", 30);
         var rectTran = rect.transition()
         .duration(2000)
         .attrTween("width", function (d, i, a) {
         return function (t) {
         return Number(a) + t * 300;
         }
         });*/

        //画圆形图开始
        var arcPath = d3.svg.arc()
                .innerRadius(innerRaidus)
                .outerRadius(outerRadius);
        //画圆形图开始
        var arcPath2 = d3.svg.arc()
                .innerRadius(innerRaidus)
                .outerRadius(outerRadius + 5);

        var color = ['#c56b4f', '#e8b63e', '#435fd8'];
        var ptDetail = ["456", "123", "256"];
        var totalSales = "835";
        var pie = d3.layout.pie().value(function (d) {
            return d - 0;
        });
        var dataset = [];//数据集合
        for (var k in ptDetail) {
            dataset.push(ptDetail[k] / totalSales);
        }
        dataset.sort(function (a, b) {
            return a < b ? 1 : -1
        });//从大到小排序
        var piedata = pie(dataset);//元素集合
        //先定义位置
        var sum = 0;
        piedata.forEach(function (d, i) {
            d.color = color[i];
            d.position = i;
            d.duration = 2000 * (d.data / d3.sum(dataset));//动画时长2秒，计算每一个弧形所用动画时间
            d.delaytime = sum;
            sum += d.duration;
        });

        var arcs = svg.selectAll("g")
                .data(piedata)
                .enter()
                .append("g")
                .attr("transform", "translate(" + sellCircleSVGWid / 2 + "," + sellCircleSVGhei / 2 + ")");
        arcs.append("path")
                .transition()
                .delay(function (d, i) {
                    return d.delaytime;
                })
                .duration(function (d, i) {
                    return d.duration;
                })
                .attrTween("d", function (d, j) {
                    var i = d3.interpolate(d.startAngle, d.endAngle);
                    return function (t) {
                        d.endAngle = i(t);
                        return arcPath(d);
                    }
                })
                .attr("stroke-width", "2px")
                .attr("fill", function (d, i) {
                    return d.color;
                });

        var isClick = false
        arcs.on("click", function (d) {//点击
            d3.select(this).select("path").transition().attr("d", function (d) {
                if (!isClick) {
                    isClick = true;
                    return arcPath2(d);
                } else {
                    isClick = false;
                    return arcPath(d);
                }
            });
        });


        var s = document.getElementById("number");
        del_ff(s);    //清理空格
        var el = s.firstChild;   //获得s的第一个子节点
        CusnumDd(el, 8);


        var a = document.getElementById("dom");
        del_ff(a);
        console.log('获取a的全部子节点:')
        console.log(a.childNodes);//获取a的全部子节点；
        console.log('获取a的父节点:')
        console.log(a.parentNode); //获取a的父节点；
        console.log('获取a的下一个兄弟节点:')
        console.log(a.nextSibling);//获取a的下一个兄弟节点
        console.log('获取a的上一个兄弟节点:')
        console.log(a.previousSibling);//获取a的上一个兄弟节点
        console.log('获取a的第一个子节点:')
        console.log(a.firstChild);//获取a的第一个子节点
        console.log('获取a的最后一个子节点:')
        console.log(a.lastChild);//获取a的最后一个子节点*/
    });

    function del_ff(elem) {
        var elem_child = elem.childNodes;
        for (var i = 0; i < elem_child.length;) {
            if (elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue)) {
                elem.removeChild(elem_child[i])
            }
            else {
                i++;
            }
        }
    }

    /**
     * 功能: 数字滚动显示
     * @param el 选择对象
     * @param param 数字参数
     */
    function CusnumDd(el, param) {
        var sum = 0;
        var time = setInterval(function () {
            sum += 1;
            el.innerHTML = sum;
            if (param <= sum) {
                clearInterval(time);
                el.innerHTML = (param);
            }
        }, 100)
    }

</script>

html

<div id="container">
    <div class="circle" id="d3Circle">
        <div id="number">
            <span></span>
        </div>
    </div>

    <div id="dom">
        <div></div>
        <div></div>
        <div></div>

    </div>
</div>

css

<style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #container {
            width: 100%;
            height: 500px;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
        }

        .circle {
            width: 100%;
            height: 200px;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        #number {
            color: black;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            position: absolute;
        }

    </style>