D3: Bar Chart data-date attr and corresponding x-axis

So in my first project for the D3 library i am getting this error when i run the 14 tests:

10. The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.

Everything else is working correctly.

So, the number of values in the x-axis are 4 points for each year from 1947 to 2014 (67 years) and then 3 points for 2015. The width of my x-axis is 900. The pading is 50 px plus 1px so it doesnt start on the y-axis line. The width of each rect is 1px. Then, this is how my x attribute looks like:

svg.selectAll(“rect”)
.data(dataset)
.enter()
.append(“rect”)
.attr(“x”, (d, i) => padding + 1 + i900/(467+3))

I have been trying to play with how it should but nothing comes up. Any feedback/help?
This is my codepen: https://codepen.io/Marksss/pen/VVVaQY?editors=0010

Were you able to solve this problem?

2 Likes