Learning D3js Text transorm becomes invisible

JavaScript
#1

I’m playing around this D3 Bar Chart Project example… CodePen. And I wonder why, when I change the transform, rotate(-90) to a positive number, the text will be invisible. Same goes with the attr('x', -250). #help

svgContainer
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -250)
    .attr("y", 60)
    .text("Gross Domestic Product");

  svgContainer
    .append("text")
    .attr("x", width / 2 + 45)
    .attr("y", height + 50)
    .text("More Information: http://www.bea.gov/national/pdf/nipaguid.pdf")
    .attr("class", "info");
#2

Hi djma,

So I went in, changed the "transform", "rotate(-90)" to -50, then -40. If you try this out, you will see the text rotating around a point that is either right at the edge of the page, or outside of it.

So if you rotate to the opposite side (the positive side), the text is off of the page.

Let me know if this makes sense, or if you have any other questions.

#3

lol :smiley::rofl: sounds so simple, that I understood it with your explanation, but couldn’t figure it out with my code. thanks so much!

#4

No problem, glad to help! Sometimes a fresh set of eyes is all you need to get past a weird problem.

1 Like
#5

@lucassorenson very well said! :smiley:

#6