D3 pie

最新推荐文章于 2024-04-27 09:46:33 发布

Claroja

最新推荐文章于 2024-04-27 09:46:33 发布

阅读量375

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/claroja/article/details/106563625

版权

js 专栏收录该内容

114 篇文章 1 订阅

订阅专栏

https://github.com/d3/d3/blob/master/API.md#pies

    <script>
        svg = d3.select('body')
            .append('svg')
            .attr("width",300)
            .attr('height',300)
        data=[["女生",43],["男生",57]]

        //设置pie布局转换器
        var pie = d3.layout.pie()
                    .value((d)=>d[1])
        //将数据转换为饼图数据类型,既将原始数据转换为arc图形的角度
        var piedata = pie(data)
        
        
        
        var outR = 100
        var inR = 0
        var arc = d3.svg.arc()
                    .innerRadius(inR)
                    .outerRadius(outR)
        var color = d3.scale.category20()
        var arcs = svg.selectAll("g")
                        .data(piedata)
                        .enter()
                        .append('g')
                        .attr("transform","translate(150,150)")
        arcs.append("path")
            .attr("fill",(d,i)=>color(i))
            .attr("d",(d)=>arc(d))
    </script>

d3.pie - create a new pie generator.
pie - compute the arc angles for the given dataset.
pie.value - set the value accessor.
pie.sort - set the sort order comparator.
pie.sortValues - set the sort order comparator.
pie.startAngle - set the overall start angle.
pie.endAngle - set the overall end angle.
pie.padAngle - set the pad angle between adjacent arcs.