D3.js Shapes Pies API 完整参考

D3.js 是一个流行的 JavaScript 库，用于创建数据可视化和交互式图形。其中，shapes pies API 是用于创建饼图的 API ，本文将为您提供完整参考。

pie(data)

pie(data) 方法用于将给定的数据转换成一个饼图布局。其中，data 是一个包含数值的数组。

const data = [10, 20, 30, 40];
const pie = d3.pie()(data);
console.log(pie);

上述代码将输出以下内容：

[
  {
    "data": 10,
    "value": 10,
    "startAngle": 0,
    "endAngle": 0.7853981633974483,
    "padAngle": 0
  },
  {
    "data": 20,
    "value": 20,
    "startAngle": 0.7853981633974483,
    "endAngle": 1.5707963267948966,
    "padAngle": 0
  },
  {
    "data": 30,
    "value": 30,
    "startAngle": 1.5707963267948966,
    "endAngle": 2.356194490192345,
    "padAngle": 0
  },
  {
    "data": 40,
    "value": 40,
    "startAngle": 2.356194490192345,
    "endAngle": 3.141592653589793,
    "padAngle": 0
  }
]

该方法返回一个数组，其中每个元素都包含以下属性：

• data: 原始数据
• value: 数据对应的值
• startAngle: 开始角度
• endAngle: 结束角度
• padAngle: 内外分离扇形之间的角度差距

arc()

arc() 方法用于创建一个圆环。

const arc = d3.arc()({
  innerRadius: 80,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
});
console.log(arc);

上述代码将输出 SVG 路径的定义字符串：

M6.123233995736766e-15,-100A100,100,0,0,1,87.15574274765817,-54.602556998732485L80.00000000000001,-80A80,80,0,0,0,1.2246467991473532e-14,-80Z

arc() 方法根据传入的参数创建 SVG 路径的定义字符串。

pie(data)(arcs)

pie(data)(arcs) 方法用于将一个饼图布局转换成一个包含 arc 元素的数组。

const data = [10, 20, 30, 40];
const pie = d3.pie()(data);
const arcs = pie.map(d3.arc()({
  innerRadius: 80,
  outerRadius: 100
}));
console.log(arcs);

上述代码将返回一个包含 arc 元素的数组，每个元素对应一个饼图扇形的 SVG 路径定义字符串。

包含代码片段

const data = [10, 20, 30, 40];
const pie = d3.pie()(data);
const arcs = pie.map(d3.arc()({
  innerRadius: 80,
  outerRadius: 100
}));
console.log(arcs);

该代码片段将在控制台输出一个包含 arc 元素的数组，每个元素对应一个饼图扇形的 SVG 路径定义字符串。