d3.js學習筆記(三) 餅圖示例
阿新 • • 發佈:2019-01-22
d3.testPies = function () { originalData = [30, 10, 43, 55, 13]; width = 1200; height = 200; radius = 240; if (svg == undefined) { svg = d3.select("body").append("svg").attr("width", radius).attr("height", radius); } //=============需要設定餅圖佈局================= pie = d3.layout.pie(); //====================將資料轉換為餅圖資料======================================= piedata = pie(originalData); var outerRadius = 90; //外半徑 var innerRadius = 0; //內半徑,為0則中間沒有空白 //=============建立能用於圖形繪製的弧生成器=================== var arc = d3.svg.arc() //弧生成器 .innerRadius(innerRadius) //設定內半徑 .outerRadius(outerRadius); //設定外半徑 //=============為每一段弧建立分組====================================================== var color = d3.scale.category10(); //================最好加上分組的ID號(以code開頭的分組物件),避免在svg畫板上繪製多個分組時出現錯誤=========================== var arcs = svg.selectAll("g[id^='code']") .data(piedata) .enter() .append("g") .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")") .attr("id", function (d, i) { return "code" + parseInt(i); }); //=================建立路徑繫結弧線發生器繪製圖形=============================== arcs.append("path") .attr("fill", function (d, i) { return color(i); }) .attr("d", function (d) { return arc(d); }); arcs.append("text") .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text(function (d) { return d.data; }); }