Why are my bars grouped in the same point?

Question

I'm currently doing an internship and I'm asked to make graphics based on cvs files with a ";" as separator. After 2-3 weeks of research I came to use d3.js (version 5). But I'm stuck on one point, I have my chart, but my columns are all grouped at the same point, I think the problem comes from the "x.domain..." but impossible to find the solution for a few days.

Any help is welcome, thanks in advance.

CSV file :

of;date;heure
37OD0109;10/09/2021;21134
37OD0109;10/09/2021;21228
37OD0109;10/09/2021;21367
37OD0109;10/09/2021;21405
37OD0109;10/09/2021;21451
37OD0109;10/09/2021;21489
37OD0109;10/09/2021;21527
37OD0109;10/09/2021;21563
37OD0109;10/09/2021;21734
37OD0109;10/09/2021;21760
37OD0109;10/09/2021;21786
37OD0109;10/09/2021;22283
37OD0109;10/09/2021;22301
37OD0109;10/09/2021;22407
37nd0109;10/09/2021;22965
37od0109;10/09/2021;23194
37od0109;10/09/2021;23212
37od0109;10/09/2021;24715
37od0109;10/09/2021;25408
37od0109;10/09/2021;25435
37od0109;10/09/2021;25494
37od0109;10/09/2021;25544

my code :

            d3.dsv(';', 'myCsv.csv').then(function (data) {

                //transformation du timestamp en heure 
                let heure = data.map(function (data) {
                    let time = data.heure / 3600;
                    let decimalTimeString = time;
                    let n = new Date(0, 0);
                    n.setMinutes(+decimalTimeString * 60);
                    // On redefini les minutes comme par quart d'heure
                    let minutes = n.getMinutes();
                    if (minutes >= 0 && minutes < 15) {
                        minutes = 0;
                        n.setMinutes(minutes);
                    } else if (minutes >= 15 && minutes < 30) {
                        minutes = 15;
                        n.setMinutes(minutes);
                    } else if (minutes >= 30 && minutes < 45) {
                        minutes = 30;
                        n.setMinutes(minutes);
                    } else {
                        minutes = 45;
                        n.setMinutes(minutes);
                    }
                    let result = n.toTimeString().slice(0, 5);
                    return result;
                });
//                console.log(heure);

                //On compte la quantité produite chaque quart d'heure
                let quantite = 1;
                let quantArray = [];
                for (let i = 1; i < data.length; i++) {

                    if (heure[i] === heure[i - 1]) {
                        quantite = quantite + 1;
                    } else {
                        quantArray.push(quantite);
                        quantite = 1;
                    }
                }
//                console.log(quantArray);

//                x.domain(heureUnique());
                x.domain(heure.map(function (h) {
                    return h;
                }));
                console.log(heure.map(function (h) {
                    return h;
                }));


                y.domain([0, 30]);
                g.append('g')
                        .attr('transform', 'translate(0,' + height + ')')
                        .call(d3.axisBottom(x).tickFormat(function (heure) {
//                            heure = heure.replace(':', 'h');
                            return heure;
                        }));


                g.append('g')
                        .call(d3.axisLeft(y).tickFormat(function (d) {
                            return d;
                        }).ticks(10));

                g.selectAll('.bar')
                        .data(quantArray)
                        .enter()
                        .append('rect')
                        .attr('class', 'bar')
//                        .on("mouseover", onMouseOver)
//                        .on("mouseout", onMouseOut)
                        .attr('x', heure.map(function (h) {
                            return h;
                        }))
                        .attr('y', function (quantArray) {
                            return y(quantArray);
                        })
                        .attr('width', x.bandwidth())
                        .transition()
                        .ease(d3.easeLinear)
                        .duration(400)
                        .delay(function (i) {
                            return i * 50;
                        })
                        .attr('height', function (quantArray) {
                            return height - y(quantArray);
                        });


                function heureUnique() {
                    let heureUnique = heure.filter(function (d, i) {
                        return heure.indexOf(d) === i;
                    });
                    return heureUnique;
                }


            });