D3学习记录：布局1——饼状图

最新推荐文章于 2021-06-27 10:51:41 发布

一只从零开始学习的小蜗牛

最新推荐文章于 2021-06-27 10:51:41 发布

阅读量454

点赞数

分类专栏： D3 文章标签： d3

本文链接：https://blog.csdn.net/zkyrjsxdm/article/details/50404039

版权

D3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

布局之饼状图

开始学习布局啦~~
一些新的概念来了，需要慢慢体会~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>布局学习之饼状图</title>
        <script type="text/javascript" src="../d3/d3.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        //布局是为了得到所绘图形所需要的数据
        var width = 400,
            height = 600;
        var dataset = [30, 10, 43, 55, 13];

        var svg = d3.select("body")
                    .append("svg")
                    .attr("height", height)
                    .attr("width", width);

        var pie = d3.layout.pie();
        //定义一个布局，返回值赋给变量pie
        //之后，pie可以作为一个函数来使用
        var piedata = pie(dataset);
        //将数据转换成饼状图所需要的形式
        var outerRadius = 150;//外半径
        var innerRadius = 0;//内半径，是0，表示中间没有留白

        var arc = d3.svg.arc()//生成了一个弧生成器
                    .innerRadius(innerRadius)//设置内半径
                    .outerRadius(outerRadius);//设置外半径

        var coler = d3.scale.category10();//生成不同颜色

        var arcs = svg.selectAll("g")
                      .data(piedata)
                      .enter()
                      .append("g")
                      .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
        //arcs包含了5个元素，为每一个个元素添加路径
        //自己想的：transform将原点移到了圆心的位置
        arcs.append("path")
            .attr("fill", function (d, i) {return coler(i);})
            .attr("d", function (d) {return arc(d);});
        //d是路径的属性

        arcs.append("text")
            .attr("transform", function (d) {return "translate(" + arc.centroid(d) + ")";})
            .attr("text-anchor", "middle")
            .text(function (d) {return d.data;})
            .attr("fill", "white");  
        //arc.centroid(d) 能算出弧线的中心，
        //在弧线中心添加文本
        //注意，经过弧生成器之后，d是一个对象，包含很多元素
        //包括角度等等
        //这里返回的是对象中的数据
        </script>
    </body>
</html>

一只从零开始学习的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3学习记录：布局1——饼状图

布局之饼状图开始学习布局啦~~ 一些新的概念来了，需要慢慢体会~<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>布局学习之饼状图</title> <script type="text/javascript" src="../d3/d3.min.js">
复制链接

扫一扫

专栏目录