javascript - Rotate SVG text around a circle then around itself using d3 -
i have visual labels placed being rotated around centre of circle. means labels on left hand side of circle upside down. possible rotate labels on left hand side around themselves, after rotation has taken place?
the visualisation based on zoomable sunburst d3js.org page http://bl.ocks.org/vgrocha/1580af34e56ee6224d33
the revelent code is:
function computetextrotation(d) { var angle=(d.x +d.dx/2)*180/math.pi - 90; return angle; } var texts = svg.selectall("text") .data(partitioned_data) .enter().append("text") .filter(filter_min_arc_size_text) .attr("transform", function(d) {return "rotate(" + computetextrotation(d) + ")"}) .attr("x", function(d) { return radius / 3 * d.depth; }) .attr("dx", "6") // margin .attr("dy", ".35em") // vertical-align .text(function(d,i) {return d.name}) i tried code below since know possible if know x , y coordinates of text won't let me pass in d.x , d.y coordinates.
var texts = svg.selectall("text") .data(partitioned_data) .enter().append("text") .filter(filter_min_arc_size_text) .attr("transform", function(d) { if (computetextrotation(d)>90&&computetextrotation(d)<270) { return "rotate(" + computetextrotation(d) + ") rotate(d.x,d.y,180)"; } else { return "rotate(" + computetextrotation(d) + ")"; } }) .attr("x", function(d) { return radius / 3 * d.depth; }) .attr("dx", "6") // margin .attr("dy", ".35em") // vertical-align .text(function(d,i) {return d.name})
i not 100% sure mean when "it wont let me pass d.x , d.y coordinates," looks trying pass in variable names strings instead of variable values. in code below changed .attr("tranform") pass values of d.x , d.y.
var texts = svg.selectall("text") .data(partitioned_data) .enter() .append("text") .filter(filter_min_arc_size_text) .attr("transform", function(d) { if (computetextrotation(d)>90&&computetextrotation(d)<270) { return "rotate(" + computetextrotation(d) + ") rotate(" + d.x + "," + d.y + ",180)"; } else { return "rotate(" + computetextrotation(d) + ")"; } }) .attr("x", function(d) { return radius / 3 * d.depth; }) .attr("dx", "6") // margin .attr("dy", ".35em") // vertical-align .text(function(d,i) {return d.name})
Comments
Post a Comment