D3.js v5.0 饼图与环形图（二）

最新推荐文章于 2022-09-26 14:44:34 发布

哈利路亚阿弥陀佛么么哒

最新推荐文章于 2022-09-26 14:44:34 发布

阅读量739

点赞数

分类专栏： D3.js 文章标签：环形图 D3.js 数据可视化

D3.js 专栏收录该内容

23 篇文章 7 订阅

订阅专栏

本文深入探讨D3.js v5.0库在创建饼图和环形图方面的应用，详细阐述了数据绑定、角度计算、过渡动画等关键步骤，帮助读者掌握数据可视化的技巧。

摘要由CSDN通过智能技术生成

环形图
在这里插入图片描述

import * as d3 from 'd3';

export default function pieRatio(node, name, ratio, color) {
 
  // 基础数据初始化
  const svgObj = {
    width: 124,
    height: 124,
    paddingTop: 28,
  };
  const radiusObj = {
    innerRadius: 47,
    outerRadius: 59,
  };
  const ratioObj = {
    dx: svgObj.width / 2,
    dy: svgObj.height / 2 + 4 + svgObj.paddingTop,
  };
  const dataset = [ratio, 100 - ratio];
  // 转换数据
  const pie = d3
    .pie()
    .sort(() => null)
    .startAngle(-Math.PI * (5 / 6))
    .endAngle(Math.PI * (5 / 6))
    .value(d => d);
  const shadowPie = d3
    .pie()
    .sort(() => -1)
    .startAngle(-Math.PI * (5 / 6))
    .endAngle(Math.PI * (5 / 6))
    .value(d => d);
    /** 
  const pie = d3
    .pie()
    .sort(() => null)
    .startAngle(0)
    .endAngle(360)
    .value(d => d);
  const shadowPie = d3
    .pie()
    .startAngle(0)
    .endAngle(360)
    .value(d => d);

     */

  const pieData = pie(dataset);
  const shadow = shadowPie([100]);

  const arc = d3
    .arc()
    .innerRadius(radiusObj.innerRadius)
    .outerRadius(radiusObj.outerRadius);
  // 绘制
  const svg = d3
    .select(node)
    .append('svg')
    .attr('width', svgObj.width)
    .attr('height', svgObj.height + svgObj.paddingTop);

  // 阴影
  svg
    .append('g')
    .attr('class', 'sexRatioGroup')
    .selectAll('.sexRatioArcs')
    .data(shadow)
    .enter()
    .append('g')
    .attr('class', 'sexRatioArcs')
    .attr('transform', `translate(${svgObj.width / 2},${svgObj.height / 2 + svgObj.paddingTop})`)
    .append('path')
    .attr('fill', '#1b5488')
    .attr('stroke', 'none')
    .attr('d', (d, i) => arc(d, i));

  // 弧形
  svg
    .append('g')
    .attr('class', 'sexRatioGroup')
    .selectAll('.sexRatioArcs')
    .data(pieData)
    .enter()
    .append('g')
    .attr('class', 'sexRatioArcs')
    .attr('transform', `translate(${svgObj.width / 2},${svgObj.height / 2 + svgObj.paddingTop})`)
    .append('path')
    .attr('fill', (d, i) => {
      if (i === 0) return color;
      return '#1b5488';
    })
    .attr('stroke', 'none')
    .transition()
    .delay(1200)
    .duration(600)
    .attrTween('d', d => {
      const i = d3.interpolate(d.startAngle, d.endAngle);
      const dN = d;
      return t => {
        dN.endAngle = i(t);
        return arc(dN);
      };
    });

  // 分类  name
  svg
    .append('g')
    .attr('class', 'sexRatioName')
    .append('text')
    .text(() => `${name}`)
    .attr('dx', ratioObj.dx)
    .attr('dy', ratioObj.dy/5)
    .attr('text-anchor', 'middle');
  // ratio百分比
  svg
    .append('g')
    .attr('class', 'sexRatioNum')
    .append('text')
    .attr('dx', ratioObj.dx)
    .attr('dy', ratioObj.dy)
    .attr('text-anchor', 'middle')
    .transition()
    .delay(600)
    .duration(2000)
    .tween('text', () => {
      const i = d3.interpolateRound(0, ratio);
      return function textContent(t) {
        this.textContent = `${i(t)}%`;
      };
    });
}