jquery - Responsive line label for d3js piechart -

currently working on d3js pie chart.

i wanted pie chart have responsive line label. can 1 guide me how can achive it.

this have tried. when values less label overlaps can see in below link.

fiddle

 var dataset = {   apples: [53245, 28479, 19697, 537, 245], };  var width = 300,     height = 300,     radius = math.min(width, height) / 2;  var color = d3.scale.category20();  var pie = d3.layout.pie()     .sort(null);  var piedata = pie(dataset.apples);  var arc = d3.svg.arc()     .innerradius(radius - 100)     .outerradius(radius - 50);  var svg = d3.select("body").append("svg")     .attr("width", width)     .attr("height", height)     .append("g")     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");  var path = svg.selectall("path")     .data(piedata)   .enter().append("path")     .attr("fill", function(d, i) { return color(i); })     .attr("d", arc);  svg.selectall("text").data(piedata)     .enter()     .append("text")     .attr("text-anchor", "middle")     .attr("x", function(d) {         var = d.startangle + (d.endangle - d.startangle)/2 - math.pi/2;         d.cx = math.cos(a) * (radius - 75);         return d.x = math.cos(a) * (radius - 20);     })     .attr("y", function(d) {         var = d.startangle + (d.endangle - d.startangle)/2 - math.pi/2;         d.cy = math.sin(a) * (radius - 75);         return d.y = math.sin(a) * (radius - 20);     })     .text(function(d) { return d.value; })     .each(function(d) {         var bbox = this.getbbox();         d.sx = d.x - bbox.width/2 - 2;         d.ox = d.x + bbox.width/2 + 2;         d.sy = d.oy = d.y + 5;     });  svg.append("defs").append("marker")     .attr("id", "circ")     .attr("markerwidth", 6)     .attr("markerheight", 6)     .attr("refx", 3)     .attr("refy", 3)     .append("circle")     .attr("cx", 3)     .attr("cy", 3)     .attr("r", 3);  svg.selectall("path.pointer").data(piedata).enter()     .append("path")     .attr("class", "pointer")     .style("fill", "none")     .style("stroke", "black")     .attr("marker-end", "url(#circ)")     .attr("d", function(d) {         if(d.cx > d.ox) {             return "m" + d.sx + "," + d.sy + "l" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;         } else {             return "m" + d.ox + "," + d.oy + "l" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;         }     }); 

you can rotate labels using css3.

transform: rotate(90deg); 

or use library: http://d3pie.org/