d3,圓弧 arc,餅圖
阿新 • • 發佈:2019-01-24
- 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.
var w=300;
var h=300;
var dataset=[5,6,7];
pie是餅圖的函式
var pie=d3.layout.pie();
初始化svgvar svg=d3.select("body") .append("svg") .attr("width",w) .attr("height",h); var outRadius=w/2; var innerRadius=w/4;
color是d3自帶的配色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+")"); //圓心位置
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,修改以下相應的引數,就有了