javascript - set position of text labels on a Sunburst chart with d3.js -




i facing problem trying position text inside wedges of sunburst chart based on d3.js. text elements seem not positioned desired on zooming..

some cases working cases looks image1 & image2

function click(d) {                 var total = d.dx;                 // fade out text elements                 text.transition().attr("opacity", 0);                  path.transition()                     .duration(duration)                     .attrtween("d", arctween(d))                     .each("end", function(e, i) {                         // check if animated element's data e lies within visible angle span given in d                         if (e.x >= d.x && e.x < (d.x + d.dx)) {                             // selection of associated text element                             var arctext = d3.select(this.parentnode).select("text")                             // fade in text element , recalculate positions                             arctext.transition().duration(duration)                                 .attr("opacity", 1)                                 .attr("transform", function(d) {                                     var rotation = computetextrotation(d);                                     return "translate(" + arc.centroid(d) + ")rotate(" + rotation + ")";                                 })                                 .attr("text-anchor", "middle")                                 .attr("visibility", function(d) { return d.dx/total < 0.01? "hidden" : "visible"});                         }                   });               }              // interpolate scales!             function arctween(d) {                 var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),                     yd = d3.interpolate(y.domain(), [d.y, 1]),                     yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);                 return function(d, i) {                     return                         ? function(t) { return arc(d); }                         : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };                 };             }              function computetextrotation(d) {                  var ang = parseint((x(d.x + d.dx / 2) - math.pi / 2) / math.pi * 180);                  return (ang >= 88 && ang <= 92) ? 0 : (ang >= -92 && ang <= -88) ? 0 : (ang > 92) ? ang - 180 : ang;             } 





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -