D3-做一个简单的饼图统计

D3js是什么

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。（摘自D3官方文档https://www.d3js.org.cn/）

因为我们要做一个饼图统计所以我们先准备一些原始数据，简单一些的话，就用一个数组存储吧

// 图书点击量的数据
datalist: [
        { bookname: '改革开放40年', clickcount: 3345 },
        { bookname: '日本失落的30年', clickcount: 2345 },
        { bookname: 'D3.的说明和使用', clickcount: 2346 },
        { bookname: '揭秘vue', clickcount: 753 },
        { bookname: 'js权威指南', clickcount: 456 },
        { bookname: '简单编程', clickcount: 763 },
        { bookname: '未知名图书', clickcount: 5673 }
      ]

　　在页面上定义div，用来存放我们之后放的svg图

<p slot="title">D3 简单饼图</p>
        <div class="simplepiebook">
        </div>

D3,提供可以操作dom的api 我们将需要的svg图插入div中

let chart = d3.select('.simplepiebook').append('svg') // select 选择哪个元素
      .attr('width', 600)
      .attr('height', 400) // width 和 height 是svg画布的大小

接着我们像svg图中加入一个g元素，为包裹层，使之后画的饼图能在svg图据中，这个和dom得方法是差不多得，用transform x y轴得偏移量

let g = chart.append('g').attr(
      'transform',
      'translate(' 300'，'200')'
    )

D3 中 d3.arc生成器是用来在饼图中生成扇形的（https://www.d3js.org.cn/document/d3-shape/#arcs）

// 定义单个圆弧
    this.arc = d3
      .arc() // 定义单个圆弧
      .innerRadius(0) // 内圆角的扇形

使用D3中的pie方法去生成一个饼图 --- 一定要注意sort 如果不传的话那么他会自己有一个排序，如果传入的是null则不进行任何排序

// 定义饼图
    let pie = d3.pie().sort(null).value(function (d) {
      return d.clickcount
    })

接着我们完成最后一步，画环圆，基本上画完一个饼图大致就有了

主要用到的D3的三个api 一个 selectAll data enter

selectAll() 是选择全部的元素 data是传入的数据，如饼图数据的画就是pie(datalist)， enter 就是对应的元素没用绑定的数据多是用的方法，因为初始我们select 是还没生成元素的

g.selectAll('.arc') // 画环图
      .data(pie(this.datalist))
      .enter()
      .append('path')
      .attr('cursor', 'pointer')
      .attr('class', 'arc')
      .attr('stroke', function (d) {
        return '#333333'
      })
      .style('fill', function (d) {
        return '#98abc5'
      })
      .each(function (d) {
        // 存储当前起始和终点的角度、并设为相等
        let tem = {
          ...d, endAngle: d.startAngle
        }
        d.outerRadius = radius - 10
        this._currentData = tem
      })
      // 动画，duration 表示每个扇形生成需要的事件
      .transition()
      .duration(100)
      // delay 表示延迟执行的时间
      .delay(function (d, i) {
        return i * 100
      })
      .attrTween('d', function (next) {
        // 动态设置D属性 生成动画
        var i = d3.interpolate(this._currentData, next)
        this._currentData = i(0) // 重设当前角度
        return function (t) {
          return _self.arc(i(t))
        }
      })

    function arcTween (outerRadius, delay) {
      let _self = this
      // 设置缓动函数
      return function () {
        d3.select(this)
          .transition()
          .delay(delay)
          .attrTween('d', function (d) {
            var i = d3.interpolate(d.outerRadius, outerRadius)
            return function (t) {
              d.outerRadius = i(t)
              return _self.arc(d)
            }
          })
      }
    }

基本上到这就能够画出大致的饼图了，如果想要设置每块都是不一样的颜色，那么可以用颜色定义一个数组，画原图一次从颜色数组中去拿就行了

接下俩我们只需要标上数据信息就行了

let piedata = pie(this.datalist) //这个就是画饼图需要处理的数据 piedata是处理过后的数据，我们根据这个数据在去画饼图上的文字，用text

let label = g.append('g')

let percentLabelArc = d3
      .arc() // 定义单个圆弧里面的percent文字
      .outerRadius(radius - 60)
      .innerRadius(radius - 60)

    let label = g.append('g')

    arcs.forEach(function (d) {
      // 输出percent文字
      const c = percentLabelArc.centroid(d)
      label
        .append('text')
        .attr('class', 'age-text')
        .attr('fill', '#cddc39')
        .attr('font-weight', '700')
        .attr('font-size', '12px')
        .attr('text-anchor', 'middle')
        .attr('x', c[0])
        .attr('y', c[1])
        .text(d.data.bookname + '点击量:'+d.data.clickcount)
    })

基本上画完就能大致呈现一个饼图的样子，还有信息

当然还可以更美观一些，还可以增加一些鼠标事件mouseover，mouseout。

总结一下用到的D3的一些东西api啥的

　　1.d3.selectAll 选择所有的元素 2.d3.enter 当元素小于数据上的数据值，绑定数据用到的方法

　　3.pie(datalist) 将数据处理成饼图需要的一些数据，包括初始角度，跨度角度 4.d3.arc 画一个饼图提供的基本方法

D3-做一个简单的饼图统计

D3js是什么

猜你喜欢