yAxisBarが正しいデータを表示しない理由D3

d3を使用して簡単な棒グラフを作成しました。ただし、軸バーのY配列にすべてのデータ項目が正しく表示されているわけではありません。

最後に表示されるデータ項目は「28」ではなく「29」である必要があります。私の場合、最後のアイテムとして「28」が表示されているためです。

この問題を解決するには、何を追加または変更する必要がありますか？

これが私が「Yスケール」を作成する方法です

var yMax = d3.max(data, data => data.devices);
   const y = d3.scaleLinear()
       .domain([0, yMax])
       .range([height, margin.top])
   const yAxis = d3.axisLeft()
       .scale(y) 

これが私のコードです

var data1 = [ 
    {flavor: 'group 1', devices: 29},
    {flavor: 'group 2', devices: 15},
    {flavor: 'group 3', devices: 6}, 
    {flavor: 'group 4', devices: 23},
    {flavor: 'group 5', devices: 17},
    {flavor: 'group 6', devices: 5},
    {flavor: 'group 7', devices: 14},
    {flavor: 'group 8', devices: 13},
    {flavor: 'group 9', devices: 19}
   ];


const devicesByFlavor = (data) => {

    var colors = ["#49D490", "#F77C7C", "#249AFF", "#EFB93F", "#FB88AF", "#76D3C1", "#94D6FF", "#D073E0", "#CFDCE5", 'dodgerblue', 'dodgerblue'];

    var width = 900,
        height = 300;

    var margin = {
        top: 55,
        left: 50,
        right: 50,
        bottom: 20
    }

    const svgChart = d3
        .select('div#chart-container')
        .append('svg')
        .attr('class', 'barChart')
        .attr('preserveAspectRatio', 'xMinYMin meet')
        .attr('viewBox', '0 0 885 350')

    //   XXXXXXXXXXXXXXXXXXXXX
    const xScale = d3.scaleBand()
        .domain(data.map(data => data.flavor))
        .range([margin.left, width - margin.right])
        .padding(0.9)

    const xAxis = d3.axisBottom()
        .scale(xScale)

    //   YYYYYYYYYYYYYYYYYYYYY
    var yMax = d3.max(data, data => data.devices)
    const yScale = d3.scaleLinear()
        .domain([0, yMax])
        .range([height, margin.top])
    const yAxis = d3.axisLeft()
        .scale(yScale)

    const rectBars = svgChart.selectAll('g')
    const bar = rectBars.data(data).enter()

    //Append xAxis
    var xAxisBar = svgChart
        .append('g')
        .attr('class', 'x-axis')
        .call(xAxis)
        .attr('transform', 'translate(0,' + height + ')')
    var xAxisBarPath = xAxisBar.select('path')
        .attr('stroke', 'lightgray')
    var xAxisBarText = xAxisBar.selectAll('text')
        .attr('fill', (d, i) => colors[i])
    var xAxisBarLine = xAxisBar.selectAll('line')
        .attr('stroke', 'transparent')
    //Add Extra Legend  
    var extraLegend = d3.selectAll('.tick')
        .data(data)
        .append('text')
        .text((d) => {
            return `${d.devices} devices`
        })
        .attr('fill', 'black')
        .attr('transform', 'translate(0 , 30)')
        .attr('font-size', '12')

    //Append yAxis  
    var yAxisBar = svgChart
        .append('g')
        .attr('class', 'y-axis')
        .attr('transform', `translate(${margin.left}, 0)`)
        .call(yAxis)

    const yAxisGrid = d3.axisLeft(yScale).tickFormat('').tickSize(100 - width)
    svgChart.append('g')
        .attr('class', 'y-axis-gridLine')
        .attr('transform', `translate(${margin.left},0)`)
        .call(yAxisGrid)

    //Append bars  
    bar
        .append('rect')
        .attr('class', 'bar')
        .attr('width', xScale.bandwidth())
        .attr('x', d => xScale(d.flavor))
        .attr('y', d => yScale(0))
        .attr('height', d => height - yScale(0))
        .attr('fill', (d, i) => colors[i])

    bar
        .selectAll('rect')
        .transition()
        .duration(800)
        .attr("y", function (d) { return yScale(d.devices) })
        .attr("height", function (d) { return height - yScale(d.devices) })
        .delay(function (d, i) { return (i * 100) })
}


devicesByFlavor(data1)

これがdemo_linkです