1. 程式人生 > >d3,圓弧 arc,餅圖

d3,圓弧 arc,餅圖

程式碼:基本資料,[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,修改以下相應的引數,就有了