Search code examples
svgtranslate

svg text translating and moving are not correct

It's my part of code to roate each text.

         .selectAll("text")
           .attr("y", 0)
           .attr("x", 9)
           .attr("dy", ".35em")
           .style("text-anchor", "start")
           .attr("transform", function(d) {
              return "rotate(90)";
           })

It seems works but I don't know why 

.attr("y", 0)

is move to left and right and

.attr("x", 9)

is move to up and down.

And why is text set as center with this code, not without .attr("y", 0) this line.

Solution

  • You have rotated the text by 90 degrees. So now, if you move the text to the "right" by increasing the X coordinate, it will actually move downwards (because of the 90 degree rotation)