切换布局
显示结果
<!DOCTYPE html> <html> <head> <style> .arc text { font: 12px arial; text-anchor: middle; } .arc path { stroke: #fff; } .title { fill: green; font-weight: italic; } </style> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg width = "400" height = "400"></svg> <script> var svg = d3.select("svg"), width = svg.attr("width"), height = svg.attr("height"), radius = Math.min(width, height) / 2; var g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var color = d3.scaleOrdinal([ 'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple' ]); var pie = d3.pie().value(function(d) { return d.percent; }); var path = d3.arc() .outerRadius(radius - 10).innerRadius(0); var label = d3.arc() .outerRadius(radius).innerRadius(radius - 80); d3.csv("/demo_source/population.csv", function(error, data) { if (error) { throw error; } var arc = g.selectAll(".arc") .data(pie(data)) .enter() .append("g") .attr("class", "arc"); arc.append("path") .attr("d", path) .attr("fill", function(d) { return color(d.data.language); }); console.log(arc) arc.append("text").attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) .text(function(d) { return d.data.language; }); }); svg.append("g") .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")") .append("text").text("Top population program language") .attr("class", "title") </script> </body> </html>