Rotating a bar chart in D3 ("Invert SVG Elements" challenge)

So, I understand that the way SVG elements work, your X and Y origin is the top left corner, which causes the inverted bar chart issue addressed in the “Invert SVG Elements” challenge. However, the solution they propose, which is setting “y = height of SVG - height of bar * scaling constant” seems a bit convoluted.

Couldn’t you just add ‘.style(“transform”, “scaleY(-1)”)’ to the SVG element? I know the challenge wont pass with this technique, but is there a problem with letting the CSS do the heavy lifting here?

I think they just want you to understand what’s going on and why the chart appears upside down. Later, you will be shown a better way to handle it without CSS or extra calculations by inverting the scale in d3.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.