D3 question. How to center an element!

There is something missing in my understanding so maybe someone knows the answer.

I am trying to add a box in the middle underneath the chart.
I thought that the total width (1000) minus 500 = 500 would mean that the box’s X position is in the middle, but it’s not. (see JS line 159 onwards)
Any idea why? :confused:

My guess it that the square is at the center of chart, but chart itself is shifted to the left by the left margin value. Try subtracting that from the square’s x attribute?

1 Like