Zoom Stacked Bar

I want to achieve zooming only selected segment of stacked bar, it should be stretched by X, another segments should shrink by X

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<html>
  <head>
    <title>Zoom Stacked Bar</title>
  </head>
  <body>
    <style>
    svg { width: 100% }
      g.axis {
        transform: translate(230px, 0px);
      }
      path {
          display: none;
        }
    </style>
    <div class="container">
      <svg 
        width="500" 
        height="800" 
        preserveAspectRatio="xMaxYMin meet" 
        viewBox="0 0 500 800" />
    </div>
  </body>
</html>

JavaScript

const xData = ["category1", "category2", "category3", "category4", "category5"];
const yData = [ "book1", "book2", "book3", "book4", "book5", "book6", "book7", "book8", "book9", "book10", "book11", "book12", "book13", "book14", "book15", "book16", "book17", "book18", "book19", "book20", "book21", "book22", "book23", "book24", "book25", "book26", "book27", "book28", "book29", "book30", "book31", "book32", "book33", "book34", "book35", "book36", "book37", "book38", "book39", "book40", "book41", "book42" ];

const data =...