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

[MarcosHernandezRodri]

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

[cowboyLad]

Were you able to solve this problem?

[Sentero-esp12]

D3 - Bar Chat - Data and alignment somehow slightly off

Edit: Yes, for me it was this hack: var xMax = new Date(d3.max(yearsDate)); xMax.setMonth(xMax.getMonth() + 3); And then var xScale = d3.scaleTime() .domain([d3.min(yearsDate), xMax]) .range([0, width]); So the xMax should be increased by 3 months. It was from the original example. It seems a bit strange, but without it the test doesn’t pass. The original example also has a lot of floating numbers: https://codepen.io/freeCodeCamp/pen/GrZVaM?editors=0010 Perhaps they are some…