D3.js pie v3 VS v4

最新推荐文章于 2025-05-16 12:40:22 发布

原创最新推荐文章于 2025-05-16 12:40:22 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#d3 #布局 #pie #arc

D3 专栏收录该内容

12 篇文章

订阅专栏

本文对比了D3.js库中pie布局在v3和v4版本之间的主要差异。在v3中，pie布局通过d3.layout.pie创建，而在v4中更改为d3.pie。两者都提供了设置起始、终止和间隔角度的方法，以及排序和值访问器的功能。v4新增了sortValues方法，但其排序方式与浏览器遍历方式相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v3-API

d3.layout.pie

创建pie布局

pie.startAngle([angle])

设置起始角度。默认从12点钟开始。path默认从3点钟方向
【angle】： Math.Pi / 180

pie.endAngle([angle])

设置终止角度
【angle】： Math.Pi / 180

pie.padAngle([angle])

设置间隔角度
【angle】： Math.Pi / 180

pie.sort([comparator])
用法
d3.layout.pie
        .sort(【comparator】)
【comparator】：
顺序： function comparator(a, b) {
return d3.ascending(parseInt(a[1]), parseInt(b[1])); //升序
}
倒序： function comparator(a, b) {
return d3.descending(parseInt(a[1]), parseInt(b[1])); //降序
}
无序： null
pie.value([accessor])
设置计算pie的依据值
pie.value(【accessor】)
【accessor】: function(d,i)){
return d[0];
}
pie(values)

用指定的values数组来计算pie;
返还：

value - 数据值，计算来自于value 生成器；
startAngle - 弧的开始弧度，非角度；
endAngle - 弧的结束弧度，非角度；
data - 输入数据中的对应元素；

v4-API

d3.pie

创建pie布局

pie

用指定的values数组来计算pie;
返还：

data - 输入数据中的对应元素
value - 弧度值；
index - 弧的序号
startAngle - 弧的开始弧度，非角度；
endAngle - 弧的结束弧度，非角度；
padAngle - 弧的间隔弧度，非角度；

pie.value([accessor])
设置计算pie的依据值
pie.value(【accessor】)
【accessor】:
function(d,i)){
return d[0];
}
pie.sort([comparator])
用法
d3.layout.pie
        .sort(【comparator】)
【comparator】：
顺序： function comparator(a, b) {
return d3.ascending(parseInt(a[1]), parseInt(b[1])); //升序
}
倒序： function comparator(a, b) {
return d3.descending(parseInt(a[1]), parseInt(b[1])); //降序
}
无序： null
pie.sortValues

排序pie(data)的输出值。。。但是排序方式并不是从0升序排序。而是和浏览器的遍历方式有关；

pie.startAngle([angle])

设置起始角度。默认从12点钟开始。path默认从3点钟方向
【angle】： Math.Pi / 180

pie.endAngle([angle])

设置终止角度
【angle】： Math.Pi / 180

pie.padAngle([angle])

设置间隔角度
【angle】： Math.Pi / 180

Demo

这里写链接内容