title: d3js v5 Resize Grouped Bar Chart
body: <p>I'm trying to resize a grouped bar chart with a resize() function.</p>
  
  <pre><code>function resize(){
  
      width = parseInt(d3.select(".c_chart").style("width"), 10);
  
      x0.rangeRound([margin.left, width-margin.right]);
      x1.rangeRound([margin.left,x0.bandwidth()-margin.right])
  
      yAxis.tickSize(width);
  
      svg.selectAll("rect")
          .attr("x", function(d) { return x1(d.key); })
          .attr("width", x1.bandwidth());
  
      svg.selectAll(".x_axis")
          .call(xAxis)    
          .selectAll("text")
          .call(wrap, x0.bandwidth());
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/apNQN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/apNQN.png" alt="enter image description here"></a></p>
  
  <p>When I start to resize the window, x-axis is ok but the x-position of my recent don't "follow" the ticks of my x-axis.
  <a href="https://i.stack.imgur.com/9IqOy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9IqOy.png" alt="enter image description here"></a></p>
  
  <p>Then, I suspect that the problem is due to x- attribute but how can I fix that?</p>
  
  <p>Here is my code: <a href="https://plnkr.co/edit/XEoM7lsBvZQmY87Wz1SP?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/XEoM7lsBvZQmY87Wz1SP?p=preview</a></p>