d3,圆弧 arc，饼图

最新推荐文章于 2021-06-26 14:10:44 发布

artemisrj

最新推荐文章于 2021-06-26 14:10:44 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript d3 文章标签： javascript d3

本文链接：https://blog.youkuaiyun.com/artemisrj/article/details/44281105

Javascript 同时被 2 个专栏收录

49 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍了d3.js库中用于创建饼图和圆弧的arc函数，包括arc.centroid、arc.cornerRadius、arc.startAngle、arc.endAngle、arc.innerRadius、arc.outerRadius等属性和方法，详细解析了如何通过这些属性来控制饼图和圆弧的形状和位置。

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

https://github.com/mbostock/d3/wiki/Pie-Layout

https://github.com/mbostock/d3/wiki/SVG-Shapes#arc

arc.centroid - compute the arc centroid.
arc.cornerRadius - get or set the corner radius accessor.
arc.endAngle - get or set the end angle accessor.
arc.innerRadius - get or set the inner radius accessor.
arc.outerRadius - get or set the outer radius accessor.
arc.padAngle - get or set the pad angle accessor.
arc.padRadius - get or set the pad radius accessor.
arc.startAngle - get or set the start angle accessor.
arc - generate a solid arc, as in a pie or donut chart.

d3.svg.arc - 创建弧度生成器.
arc - 生成一个线性弧度,用于饼图或甜甜圈图.
arc.innerRadius - 获取或设置内部的半径访问器.
arc.outerRadius - 获取或设置外部的半径访问器.
arc.startAngle - 获取或设置起始角度访问器.
arc.endAngle - 获取或设置结束角度访问器.
arc.centroid - 计算弧的重心点.

代码：基本数据，[5,6,7]

var w=300;
var h=300;
var dataset=[5,6,7];

pie是饼图的函数

var pie=d3.layout.pie();

初始化svg

var svg=d3.select("body")
		.append("svg")
		.attr("width",w)
		.attr("height",h);
var outRadius=w/2;
var innerRadius=w/4;

var arc=d3.svg.arc()
		.innerRadius(innerRadius)
		.outerRadius(outRadius);
		
var arcs=svg.selectAll("g.arc") //生成和dataset对应的g ,class是arc,数据集有多少个，类有多少个
		.data(pie(dataset)) //pie(dataset)把数据本身进行改变
		.enter()
		.append("g")
		.attr("class","arc")
		.attr("transform","translate("+outRadius+","+innerRadius+")"); //圆心位置

color是d3自带的配色
var color=d3.scale.category10();
arcs.append("path")
.attr("fill",function(d,i){
return color(i);
})
.attr("d",arc);

结果生成了圆环图

以下是浏览器生成的代码

<svg width="300" height="300">
<g class="arc" transform="translate(150,75)">
<path fill="#1f77b4" d="M-147.7211629518312,26.04722665003954A150,150 0 0,1 -2.7553642961003488e-14,-150L-1.3776821480501744e-14,-75A75,75 0 0,0 -73.8605814759156,13.02361332501977Z"></path></g>
<g class="arc" transform="translate(150,75)">
<path fill="#ff7f0e" d="M96.41814145298092,114.90666646784669A150,150 0 0,1 -147.7211629518312,26.04722665003954L-73.8605814759156,13.02361332501977A75,75 0 0,0 48.20907072649046,57.453333233923345Z"></path></g>
<g class="arc" transform="translate(150,75)">
<path fill="#2ca02c" d="M9.18454765366783e-15,-150A150,150 0 0,1 96.41814145298092,114.90666646784669L48.20907072649046,57.453333233923345A75,75 0 0,0 4.592273826833915e-15,-75Z"></path></g></svg>

pie(dataset)的数据

pie(dataset)
[
Object
data: 5
endAngle: 6.283185307179586
padAngle: 0
startAngle: 4.537856055185257
value: 5
__proto__: Object
, 
Object
data: 6
endAngle: 4.537856055185257
padAngle: 0
startAngle: 2.443460952792061
value: 6
__proto__: Object
, 
Object
data: 7
endAngle: 2.443460952792061
padAngle: 0
startAngle: 0
value: 7
__proto__: Object]

可以看到数据有padAngle,修改以下相应的参数，就有了