var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var pie_data = d3.pie() .sort(null) .value(function(d){return d.val;}) (data_set) ; var color_scale = d3.scaleOrdinal() .domain( d3.min(data_set, function(d){ return d.val; }), d3.max(data_set, function(d){ return d.val; })) .range( d3.schemeCategory10 ) ; var arc = d3.arc() .outerRadius( 200 ) .innerRadius( 0 ) ; var label_arc = d3.arc() .outerRadius( 150 ) .innerRadius( 150 ) ; var pie_chart = d3.select("#content") .selectAll(".arc") .data(pie_data) .enter() .append("g") .attr("class", "arc") .attr("transform", "translate(300, 200)") ; pie_chart.append("path") .attr("d", arc) .style("fill", function(d,i){ return color_scale( d.data.val ) ; }) pie_chart.append("text") .attr("transform", function(d) { return "translate("+label_arc.centroid(d)+ ")" }) .text(function(d){return d.data.name }) ;
<script src="https://d3js.org/d3.v4.min.js"></script> <svg id="content" width="600" height="400"></svg>