D3 v5.0 3D饼图（进化版）

最新推荐文章于 2024-08-29 07:55:10 发布

哈利路亚阿弥陀佛么么哒

最新推荐文章于 2024-08-29 07:55:10 发布

阅读量1.1k

点赞数 2

分类专栏： D3.js

本文链接：https://blog.csdn.net/m0_37777005/article/details/103199548

版权

先给个初代的传送门。
https://blog.csdn.net/m0_37777005/article/details/90693963

说明一下：
只提供3D饼图填充的算法（感谢highcharts大佬们开源,开箱即用）

使用：

/*
alpha 可以理解为旋转角度，具体可到highchart API文档查看
startAngle 经过d3.pie()数据处理后,每一个arc 的startAngle
endAngle 经过d3.pie()数据处理后,每一个arc 的endAngle
outerRadius 外半径
innerRadius 内半径
hh: 3D饼图的高
*/
 get3DArcPath(alpha, d.startAngle, d.endAngle, outerRadius, innerRadius, hh)

const PI = Math.PI;
const cos = Math.cos;
const sin = Math.sin;

const dFactor = (4 * (Math.sqrt(2) - 1) / 3) / (PI / 2);
function curveTo(cx: any, cy: any, rx: any, ry: any, start: any, end: any, dx: any, dy: any) {
   
  let result: any[] = [];
  const arcAngle = end - start;
  if ((end > start) && (end - start > Math.PI / 2 + 0.0001)) {
   
    result = result.concat(curveTo(cx, cy, rx, ry, start, start + (Math.PI / 2), dx, dy));
    result = result.concat(curveTo(cx, cy, rx, ry, start + (Math.PI / 2), end, dx, dy));
    return result;
  }
  if ((end < start) && (start - end > Math.PI / 2 + 0.0001)) {
   
    result = result.concat(curveTo(cx, cy, rx, ry, start, start - (Math.PI / 2), dx, dy));
    result = result.concat(curveTo(cx, cy, rx, ry, start - (Math.PI / 2), end, dx, dy));
    return result;
  }
  return [
    'C',
    cx + (rx * Math.cos(start)) -
    ((rx * dFactor * arcAngle) * Math