Why is Index starting at 24?

Hey guys im currently battling it out with D3.js and I can’t really understand why this is happening ?

Heres the code snippet:

svgBG.selectAll("text")
            .data(gdp)
            .enter()
            .append("text")
            .attr("class", "tool-tip")
            .attr("x", function (d, i) {
                console.log(i)
                return xScale(timeIntervalls[i])
            })
            .attr("y", function (d) {
                return height - linearScale(d);
            })
            .text((d, i) => d)

And I don’t understand why index, when im setting the x-coordinate , is starting at 24 ?

Here you can see the whole project so far :