javascript - Place text on the radii extending from the center of a circle D3 -


i've got (using d3) circular arc have number of evenly spaced points on. need place text on radius extending through center of circle, through center of point on arc.

so visualize, text @ unit circle position 0 not rotated. text @ unit circle position 90 degrees rotated 90 degrees. text @ -90 degrees rotated 90... etc.

i have tried doing this.

var labeltextupdate = this.svg     .select('#nodes')     .selectall('text')     .data(circledata, function(d) { return d.id;});  var labeltextenter = labeltextupdate.enter()     .append('text')     .style('text-anchor', 'start')     .attr('x', function(d) { return d.coords.x;})     .attr('y', function(d) { return d.coords.y;})     .attr('transform', function(d) {         return 'rotate(' + d.angle + ')';     })     .text(function(d) {         return d.type;     });  labeltextupdate     .transition().duration(400)     .attr('x', function(d) { return d.coords.x;})     .attr('y', function(d) { return d.coords.y;})     .attr('transform', function(d) {         return 'rotate(' + d.angle + ')';     }); 

i'll admit, don't know d3, code have right now, minus "transform" lines, sticks text right on top of point on arc want it, must close.

however, doesn't though able pass in angle transform attribute? when try code have pasted, text goes away. when forget trying parametrize angle , use constant angle

.attr('transform', 'rotate(5)'); 

this appears achieve desired rotation of text, don't want of text rotated same angle.

would know how fix working code?

i able figure out. on right track rotate function, need supply point around rotate.

something this

.attr('transform', function(d) {     return "rotate(" + angle + ", " + x + ", " + y + ")"; }); 

i'm guessing without provided rotation point (x,y), d3 must default whatever thinks best guess. best guess took text right out of svg area. don't know if end helping anyone, answered question , took me while find out additional parameters rotate can take.


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -