D3 Heat Map Can't pass project tests about y scale

JavaScript
1

Hello everybody,
I’m working on the project about D3 Heat Map. My output is almost done, but I can’t still pass one of the test. In particular I get:

My heat map should have cells that align with the corresponding month on the y-axis. AssertionError: month values don’t line up with y locations : expected false to be true

Here’s my code for the y scale and y position of the bar:

    const yScale = d3.scaleBand()
      .domain([1,2,3,4,5,6,7,8,9,10,11,12])
      .range([padding, h - padding]);

    svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("class", "cell")
      .attr("x", (d) => xScale(d.year)+1)
      .attr("y", (d) => yScale(d.month))
     .....

Anyone can help me? I can’t understand what the automatic test is checking

2

Why are you adding 1 to the x attribute?

3

Because otherwise the bands on the left overlap the vertical axis.

Anyway, I found the solution by myself: I used a fixed height for the bars, but that’s wrong. The correct way is to set the height of the bars using the function bandwidth of the scale and passing it the value of the domain

4

Thanks! scaleBand is what I was missing to pass mine. Man, the axes are slaying me on each project!