javascript - d3 pie chart not displaying all labels -
i trying simple pie chart labels inside slices. can display labels not all. e.g. in sample code have rick 5%, paul 4% , steve 3% not displayed because of small size of slices. how can overcome problem?
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>testing pie chart</title> <!--<script type="text/javascript" src="d3/d3.v2.js"></script>--> <script src="../js/d3.min.js" type="text/javascript"></script> <style type="text/css"> #piechart { position:absolute; top:10px; left:10px; width:400px; height: 400px; } #linechart { position:absolute; top:10px; left:410px; height: 150px; } #barchart { position:absolute; top:160px; left:410px; height: 250px; } .slice { font-size: 8pt; font-family: verdana; fill: white; //svg specific - instead of color font-weight: normal ; } /*for line chart*/ .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispedges; //the shape-rendering property svg attribute, used here make sure our axis , tick mark lines pixel-perfect. } .line { fill: none; /*stroke: steelblue;*/ stroke-width: 3px; } .dot { /*fill: white;*/ /*stroke: steelblue;*/ stroke-width: 1.5px; } .axis text { font-family: verdana; font-size: 11px; } .title { font-family: verdana; font-size: 15px; } .xaxis { font-family: verdana; font-size: 11px; fill: black; } .yaxis { font-family: verdana; font-size: 11px; fill: white; } table { border-collapse:collapse; border: 0px; font-family: verdana; color: #5c5558; font-size: 12px; text-align: right; } td { padding-left: 10px; } #linecharttitle1 { font-family: verdana; font-size : 14px; fill : lightgrey; font-weight: bold; text-anchor: middle; } #linecharttitle2 { font-family: verdana; font-size : 72px; fill : grey; text-anchor: middle; font-weight: bold; /*font-style: italic;*/ } </style> </head> <body> var formataspercentage = d3.format("%"), formataspercentage1dec = d3.format(".1%"), formatasinteger = d3.format(","), fsec = d3.time.format("%s s"), fmin = d3.time.format("%m m"), fhou = d3.time.format("%h h"), fwee = d3.time.format("%a"), fdat = d3.time.format("%d d"), fmon = d3.time.format("%b") ; function dspiechart() { var dataset = [ {category: "tom", measure: 0.30}, {category: "john", measure: 0.30}, {category: "martin", measure: 0.30}, {category: "sam", measure: 0.30}, {category: "peter", measure: 0.25}, {category: "johannes", measure: 0.15}, {category: "rick", measure: 0.05}, {category: "lenny", measure: 0.18}, {category: "paul", measure: 0.04}, {category: "steve", measure: 0.03} ] ; var width = 400, height = 400, outerradius = math.min(width, height) / 2, innerradius = outerradius * .999, // animation innerradiusfinal = outerradius * .5, innerradiusfinal3 = outerradius * .45, color = d3.scale.category20() //builtin range of colors ; var vis = d3.select("#piechart") .append("svg:svg") .data([dataset]) .attr("width", width) .attr("height", height) .append("svg:g") .attr("transform", "translate(" + outerradius + "," + outerradius + ")") ; var arc = d3.svg.arc() .outerradius(outerradius).innerradius(innerradius); // animation var arcfinal = d3.svg.arc().innerradius(innerradiusfinal).outerradius(outerradius); var arcfinal3 = d3.svg.arc().innerradius(innerradiusfinal3).outerradius(outerradius); var pie = d3.layout.pie() .value(function (d) { return d.measure; }); var arcs = vis.selectall("g.slice") .data(pie) .enter() .append("svg:g") .attr("class", "slice") .on("mouseover", mouseover) .on("mouseout", mouseout) .on("click", up) ; arcs.append("svg:path") .attr("fill", function (d, i) { return color(i); }) .attr("d", arc) .append("svg:title") .text(function (d) { return d.data.category + ": " + formataspercentage(d.data.measure); }); d3.selectall("g.slice").selectall("path").transition() .duration(750) .delay(10) .attr("d", arcfinal) ; arcs.filter(function (d) { return d.endangle - d.startangle > .2; }) .append("svg:text") .attr("dy", ".35em") .attr("text-anchor", "middle") .attr("transform", function (d) { return "translate(" + arcfinal.centroid(d) + ")rotate(" + angle(d) + ")"; }) .text(function (d) { return d.data.category; }) ; function angle(d) { var = (d.startangle + d.endangle) * 90 / math.pi - 90; return > 90 ? - 180 : a; } // pie chart title vis.append("svg:text") .attr("dy", ".35em") .attr("text-anchor", "middle") .text("revenue share 2012") .attr("class", "title") ; function mouseover() { d3.select(this).select("path").transition() .duration(750) //.attr("stroke","red") //.attr("stroke-width", 1.5) .attr("d", arcfinal3) ; } function mouseout() { d3.select(this).select("path").transition() .duration(750) //.attr("stroke","blue") //.attr("stroke-width", 1.5) .attr("d", arcfinal) ; } function up(d, i) { updatebarchart(d.data.category, color(i)); updatelinechart(d.data.category, color(i)); } } dspiechart(); </script> </body>
this line of code determines slices label text appended them:
arcs.filter(function (d) { return d.endangle - d.startangle > .2; }) .append("svg:text")... so slices total arc angle less 0.2 radians filtered out, , label text not added.
you reduce filter value, display labels on thinner slices (e.g. change .2 in example .05) effect want:
Comments
Post a Comment