D3 v4.x入门（1-4）——带动画的饼状图

末蓝、 2021-09-16 00:10 374阅读 0赞

依旧是简单粗暴的饼图源码（带动画）

![70][]

<template>
      <div id='svgContainer' style="">
        <div class="every">
          <h3>饼图探究</h3>
          <div class="svg" id="pie"></div>
        </div>
      </div>
    </template>
    <script>
    import * as d3 from 'd3'
    export default {
      data () {
        return {
          pieData: [{
            name: '小米',
            value: 60.8
          }, {
            name: '华为',
            value: 20.8
          }, {
            name: '联想',
            value: 30.4
          }, {
            name: '三星',
            value: 40.8
          }, {
            name: '苹果',
            value: 90.8
          }, {
            name: '其他',
            value: 100.8
          } ]
        }
      },
      methods: {
        pie () {
          let _this = this
          let width = 400
          let height = 400
          document.getElementById('pie').innerHTML = ''
          let svg = d3.select('#pie')
            .append('svg')
            .attr('width', width + 'px')
            .attr('height', height + 'px')
          let pie = d3.pie()
            .value((d) => d.value)
          // 数据转化
          let pieData = pie(_this.pieData)
          let outerRadius = width / 2.8
          let innerRadius = 0
          // 创建弧生成器
          let arc = d3.arc()
            .innerRadius(outerRadius)
            .outerRadius(innerRadius)
          let color = d3.interpolateCool
          let arcs = svg.selectAll('g')
            .data(pieData)
            .enter()
            .append('g')
            .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
          arcs.append('path')
            .attr('fill', function (d, i) { return color(i) })
            .attr('d', function (d, i) { return arc(d) })
            // 设置动画,还未看懂这部分内容的参数部分
            .transition()
            .duration(4000)
            .attrTween('d', function (d, i) {
              let fn = d3.interpolateObject({
                endAngle: d.startAngle
              }, d)
              return function (i) {
                return arc(fn(i))
              }
            })
          // 添加文字value
          arcs.append('text')
            .attr('transform', function (d) {
              let x = arc.centroid(d)[0] * 1.4
              let y = arc.centroid(d)[1] * 1.4
              return 'translate(' + x + ',' + y + ')'
            })
            .attr('text-anchor', 'middle')
            .attr('font-size', '14')
            .text(function (d) {
              return d.value
            })
          // 添加文字name
          arcs.append('text')
            .attr('transform', function (d) {
              let x = arc.centroid(d)[0] * 2.5
              let y = arc.centroid(d)[1] * 2.5
              return 'translate(' + x + ',' + y + ')'
            })
            .attr('text-anchor', 'middle')
            .attr('font-size', '14')
            .text(function (d) {
              return d.data.name
            })
          // 添加直线
          arcs.append('line')
            .attr('stroke', 'black')
            .attr('stroke-width', '2px')
            .attr('x1', function (d) { return arc.centroid(d)[0] * 2 })
            .attr('y1', function (d) { return arc.centroid(d)[1] * 2 })
            .attr('x2', function (d) { return arc.centroid(d)[0] * 2.3 })
            .attr('y2', function (d) { return arc.centroid(d)[1] * 2.3 })
        }
      },
      mounted () {
        this.pie()
      }
    }
    </script>
    <style lang="less">
    #svgContainer{
      width: 100%;
      height: 100%;
      .every{
        width: 400px;
        height: 425px;
        margin:15px;
        float: left;
        h3{
          margin:0;
          .button{
            float: right;
            margin-right: 20px;
            font-size: 14px;
            cursor: pointer;
            padding: 2px 8px;
            border:1px solid #ccc;
            background: yellowgreen;
            border-radius: 4px;
            &:hover{
              background: violet;
            }
          }
        }
        .svg{
          width: 400px;
          height: 400px;
        }
      }
    }
    </style>

[70]: /images/20210813/8c5132a48b5340918b3e1dbc78dda080.png