数据可视化——D3实现饼图的绘制

本文链接：https://blog.youkuaiyun.com/weixin_46744761/article/details/117248522

用D3绘制饼图有两种方法，一种是基于弧度的可视化，一种是基于数据的可视化
基于弧度：

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>       
        <script src="d3.v3.min.js"></script>
        <script>           
            var w=window.innerWidth 
            || document.documentElement.clientWidth 
            || document.body.clientWidth;

            var h=window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
            w=w*0.98;
            h=h*0.9;
            var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);
            
            var dataset=[{startAngle:0,endAngle:1},
            {startAngle:1,endAngle:2},
            {startAngle:2,endAngle:4},
            {startAngle:4,endAngle:5},
            {startAngle:5,endAngle:Math.PI*2}];
            var arcPath=d3.svg.arc()
                            .innerRadius(150)
                            .outerRadius(300)
            svg.selectAll("path")
                .data(dataset)
                .enter()
                .append("path")
                .attr("d",function(d){
                    return arcPath(d)
                })
                .attr("fill","yellow")
                .attr("stroke","blue")
                .attr("transform","translate("+w/2+","+h/2+")");

        </script>
    </body>
</html>

在这里插入图片描述
基于数据：

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>       
        <script src="d3.v3.min.js"></script>
        <script>           
            var w=window.innerWidth 
            || document.documentElement.clientWidth 
            || document.body.clientWidth;

            var h=window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
            w=w*0.98;
            h=h*0.9;
            var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);
            
            var dataset=[["农业",90],["工业",200],["第三产业",400]];
            var pie=d3.layout.pie()
                        .value(function(d){return d[1];});
            var piedata=pie(dataset);
            var arc=d3.svg.arc()
                            .innerRadius(100)
                            .outerRadius(300)
            svg.selectAll("path")
                .data(piedata)
                .enter()
                .append("path")
                .attr("d",function(d){
                    return arc(d)
                })
                .attr("fill","yellow")
                .attr("stroke","blue")
                .attr("transform","translate("+w/2+","+h/2+")");

        </script>
    </body>
</html>

在这里插入图片描述
基于弧度绘制的电影数据可视化：

<html>
    <head>
        <meta charset="UTF-8">
        <center><font size="8"><strong>2020年各题材电影票房占比</strong></font></center>
    </head>
    <body>
        <div style="position: absolute; bottom: 630px; right: 465px;"><font size="2"><strong>数据来源：艺恩数据</strong></font></div>       
        <script src="d3.v3.min.js"></script>
        <script>           
            var w=window.innerWidth 
            || document.documentElement.clientWidth 
            || document.body.clientWidth;

            var h=window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
            w=w*0.98;
            h=h*0.9;
            var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);
            
            var dataset=[["剧情",23],["喜剧",21],["战争",18],["动画",15],["动作",13],["爱情",5],["其他",5]];
            var pie=d3.layout.pie()
                        .value(function(d){return d[1];});
            var piedata=pie(dataset);
            var arc=d3.svg.arc()
                            .innerRadius(100)
                            .outerRadius(200)

            var arcs=svg.selectAll("g")
                        .data(piedata)
                        .enter()
                        .append("g")
                        .attr("transform","translate("+(w/2)+","+(h/2)+")");
            arcs.append("path")
                .attr("d",function(d){
                    return arc(d)
                })
                .attr("fill","#7bbfea")
                .attr("stroke","white")
                .on("mouseover",function(d){
                    d3.select(this)
                        .attr("fill","#f8aba6")
                })
                .on("mouseout",function(d){
                    d3.select(this)
                        .attr("fill","#7bbfea")
                });            
            svg.selectAll("text")
                .data(piedata)
                .enter()
                .append("text")
                .attr("fill","white")
                .attr("text-anchor","middle")
                .attr("transform",function(d){
                    var x=arc.centroid(d)[0];
                    var y=arc.centroid(d)[1];
                    return "translate("+(w/2+x)+","+(h/2+y)+")";
                })
                .text(function(d){return d.value+"%"});
            arcs.append("line")
                .attr("stroke","#cde6c7")
                .attr("x1",function(d){ return arc.centroid(d)[0]*1.34;})
                .attr("y1",function(d){ return arc.centroid(d)[1]*1.34;})
                .attr("x2",function(d){ return arc.centroid(d)[0]*1.5;})
                .attr("y2",function(d){ return arc.centroid(d)[1]*1.5;});

            arcs.append("text")
                .attr("fill","#145b7d")
                .attr("transform",function(d){
                    var x=arc.centroid(d)[0]*1.6;
                    var y=arc.centroid(d)[1]*1.6;
                    return "translate("+x+","+y+")";
                })
                .attr("text-anchor","middle")
                .text(function(d){
                    return d.data[0];
                });
        </script>

    </body>
</html>

在这里插入图片描述