Having error with rendering svg with D3

I am creating a D3 Bar Chart project and I am at the beginning.

When I try to create a x-axis I can’t see it.
When I delete the attr function which add translate function to transform attribute. The axis showed up on the top of the svg element. What’s wrong?

Project Link: https://codepen.io/AndrewAung11/pen/yLMOPBw

In
attr('transform', 'translate(60, 400)')

try adjusting the right-side input from 400 to 300 to 200 to 100 and you’ll see the axis appear and move up the screen. In translate(60, 400), 60 represents a translation in the positive-x direction ( to the right) and 400 represents a translation in the positive-y direction (downward in d3). So, when you go from 400 to 300, you are moving the axis upward by 100 units.

1 Like

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