D3.js的V5版本-Vue框架中使用(第七章) ---饼状图(pie)

本文链接：https://blog.youkuaiyun.com/davidPan1234/article/details/80745318

本文介绍了如何在Vue框架中利用D3.js V5版本创建饼状图，包括了弧生成器的使用，如innerRadius和outerRadius参数，以及arc.centroid方法来设置弧形中心坐标。同时，讲解了d3.pie()生成器用于创建饼状图数据，以及d3.schemeCategory10提供的离散色彩方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. api简介

为了画饼状图需要知道了解以下知识点：

1.弧生成器

(1). 官方api带参或不带参数效果一样：innerRadius(num)-内半径；outerRadius(num)-外半径;

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

let arc = d3.arc();

arc({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); //

或者：

let arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

(2) arc.centroid(arguments…)

设置弧形中心坐标点

Computes the midpoint [x, y] of the center line of the arc: (startAngle + endAngle) / 2 and (innerRadius + outerRadius) / 2.

2. 饼状图生成器

d3.pie()饼状图生成器; d3.pie()(data)-弧形数据

3. 离散色彩生成器

d3.schemeCategory10 ---- [color1, color2...]

二.Vue中使用

<template lang='pug'>
    div.pie-pane(:id="id")
        svg
</template>
<script>
/**
 * 饼状图
 */
import * as d3 from 'd3'
export default {
    name: 'Scale',
    data() {
        return {
            id: ''
        }
    },
    methods: {
        uuid () {
            function s4 () {
                return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1)
            }
            return (
                s4() + s4() + '-' + s4() + '-' + s4() +  '-' + s4() + '-' + s4() + s4() + s4()
            )
        }
    },
    created() {
        this.id = this.uuid()
    },
    mounted () {
        //1.创建svg画布
        let marge = { top: 160, bottom: 60, left: 160, right: 60 }
        let width = document.getElementById(this.id).clientWidth
        let height = document.getElementById(this.id).clientHeight
        const svg = d3.select(this.$el).select('svg').attr('width', width).attr('height', height)
        let g = svg.append('g').attr('transform', 'translate(' + marge.top + ',' + marge.left + ')')
        //2.设置颜色比例尺
        let dataSet = [100, 200, 500]
        let colorScale = d3.scaleOrdinal()
            .domain(d3.range(dataSet.length))
            .range(d3.schemeCategory10)
        //3.新建弧形生成器
        let innerRadius = 0
        let outerRadius = 100
        let arc_generator = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
        //4.利用饼状图生成器转换成画弧形需要的数据
        // let pie = d3.pie()
        // let arcData = pie(dataSet)
        let arcData = d3.pie()(dataSet)
        console.log(arcData)
        //5.为每一个扇形建立分组<g>
        let gs = g.selectAll('.g')
            .data(arcData)
            .enter()
            .append('g') 
        //6.绘制扇形
        gs.append('path')
            .attr('d', function(d) {
                return arc_generator(d)
            })
            .attr('fill', function(d, i) {
                return colorScale(i)
            })
        //7.绘制文字
        gs.append('text')
            .attr('transform', function(d) {
                //位置设在中心处  
                return 'translate('+ arc_generator.centroid(d) +')'
            })
            .attr('text-anchor', 'middle')
            .text(function(d) {
                return d.data
            })
    }
}
</script>
<style lang='scss' scoped>
.pie-pane {
    width: 600px;
    height: 600px;
}
</style>