D3 не хочет перерисовывать

    const data = new Array(20).fill(0).map(v => Math.random() * 50); 
 
    const yScale = d3.scaleLinear() 
        .domain([0, 50]).range([100, 300]) 
        .nice(); 
 
    const sections = d3 
        .select('.bar-chart') 
        .selectAll('div') 
        .data(data) 
        .enter() 
        .append('div') 
        .classed('cubic', true); 
 
    const redraw = () => { 
   
        const width = d3.select('.bar-chart').node().clientWidth; 
 
        sections 
            .style('height', d => `${yScale(d)}px`) 
            .style('width', d => `${width / data.length - 3}px`) 
    } 
 
    redraw(); 
    window.addEventListener("resize", redraw);

svg { 
  border: 1px solid #000; 
} 
 
.cubic { 
    background-color: #F00;     
    display: inline-block; 
    width: 20px; 
    margin-right: 2px; 
    position: relative; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
<div class="bar-chart"> 
  
</div>