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
Post a Comment