Question

I have an array with two strings and I want them to align with two circles (see example: http://bl.ocks.org/3028447)

I’m currently doing this:

.attr("transform", function(d, i) { return "translate(" + x(i)+",0) rotate(-45," + x(1)+"," + 0+") "; })

I was sure there was a simpler way to do it, something like this:

.attr("transform", function(d, i) { return "translate(" + x(i)+",0) rotate(-45) "; })

but when I use that I get this (http://bl.ocks.org/3028512), and I don’t understand why.

Answer 1

You’ve combined your transform with x and y attributes:

.attr("y", 0)
.attr("x", 60)

These get applied before the transform (i.e., before the rotation), hence the text is not in the same position as the circles. Sometimes this technique is useful; the x moves the text parallel to the text’s baseline. So, if you wanted to position the text slightly outside the circle, you could change the x value to 6 rather than 60.