We can draw a pie chart by using svg to render arcs.
The conversion of data to appropriate arc sizes is handled by d3's pie layout.
var dataset = [ 5, 10, 20, 20, 6, 25 ];
var w = 500;
var h = 500;
var svg = d3.select("#draw_here")
.append("svg")
.attr("width", w)
.attr("height", h);
var outerRadius = w / 2;
var innerRadius = w / 4;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var pie = d3.layout.pie();
var color = d3.scale.category10();
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate("+ outerRadius + ", " + outerRadius +")");
arcs.append("path")
.attr("fill", function(d, i) {
return color(i)
})
.attr("d", arc);
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.value;
});