用d3.js畫餅狀圖
阿新 • • 發佈：2019-02-08
演示地址：http://runjs.cn/detail/b5xujnep<html> <head> <meta charset="utf-8"> <title>餅狀圖</title> </head> <style> </style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var width = 400; var height = 400; var dataset = [ 30 , 10 , 43 , 55 , 13 ]; var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); var pie = d3.layout.pie(); var piedata = pie(dataset); var outerRadius = 150; //外半徑 var innerRadius = 5; //內半徑，為0則中間沒有空白 var arc = d3.svg.arc() //弧生成器 .innerRadius(innerRadius) //設定內半徑 .outerRadius(outerRadius); //設定外半徑 var color = d3.scale.category10(); var arcs = svg.selectAll("g")//g用於把相關元素進行組合的容器元素 .data(piedata) .enter() .append("g") .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); 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; }); console.log(dataset); console.log(piedata); </script> </body> </html>