title: How to zoom in chart correctly with multiple y-axis
body: <p>I have implemented a zoom function for my chart, where one can zoom into a certain area of the chart by dragging the area and releasing it. My fiddle is accessible <a href="https://jsfiddle.net/kahmeng96/zf4yab17/19/" rel="nofollow noreferrer">here</a>. </p>
  
  <p>The zoom function is working correctly for the blue line as both the blue line and the left axis is being updated. However, the right axis is not being updated while the red line is zoomed in. I have hardcoded a domain from 0 to 200 for the right axis so whenever I zoom in the domain goes from 0 to 200 instead of the correct zoomed in domain. What should be the code for the domain for the axis on the right so that it gets updated during the zoom? Any help is greatly appreciated!</p>
  
  <pre><code>    var data = [ {x: 0, y: 0, y1: 0}, {x: 1, y: 30, y1: 100}, {x: 2, y: 40, y1: 200},
                  {x: 3, y: 60, y1: 300}, {x: 4, y: 70, y1: 400}, {x: 5, y: 90, y1: 500} ];
  
      const margin = {
        left: 20,
        right: 20,
        top: 20,
        bottom: 80
      };
  
      const svg = d3.select('svg');
      svg.selectAll("*").remove();
  
      const width = 200 - margin.left - margin.right;
      const height = 200 - margin.top - margin.bottom;
  
      const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
  
      var x = d3.scaleLinear()
              .domain([0, d3.max(data, function(d){ return d.x; })])
              .range([0,width])
              .nice();
  
      var y = d3.scaleLinear()
              .domain([0, d3.max(data, function(d){ return d.y; })])
              .range([0,height])
              .nice();
  
      var y1 = d3.scaleLinear()
              .domain([0, d3.max(data, function(d) { return d.y1; })])
              .range([0, height])
              .nice();
  
      const xAxis = d3.axisTop()
                  .scale(x)
                  .ticks(5)
                  .tickPadding(3)
                  .tickSize(-height)
  
      const yAxis = d3.axisLeft()
                  .scale(y)
                  .ticks(5)
                  .tickPadding(3)
                  .tickSize(-width);
  
      const yAxis1 = d3.axisRight()
                  .scale(y1)
  
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(20,20)")
        .call(xAxis);
  
      svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(20,20)")
        .call(yAxis);
  
      svg.append("g")
        .attr("class", "y1 axis")
        .attr("transform", "translate(185,20)")
        .call(yAxis1);
  
  
      var lineFunction = d3.line()
      .x(function(d) {return x(d.x); })
      .y(function(d) {return y(d.y); })
      .curve(d3.curveLinear);
  
      var lineFunctionOne = d3.line()
      .x(function(d) {return x(d.x); })
      .y(function(d) {return y1(d.y1); })
      .curve(d3.curveLinear);
  
      //defining and plotting the lines
      var path = g.append("path")
                .attr("class", "path1")
                .attr("id", "blueLine")
                .attr("d", lineFunction(data))
                .attr("stroke", "blue")
                .attr("stroke-width", 2)
                .attr("fill", "none")
                .attr("clip-path", "url(#clip)");
  
      var path1 = g.append("path")
                .attr("class", "path2")
                .attr("id", "redLine")
                .attr("d", lineFunctionOne(data))
                .attr("stroke", "red")
                .attr("stroke-width", 2)
                .attr("fill", "none")
                .attr("clip-path", "url(#clip)");
  
      //************* Zoom ***************
      //add brushing
      var brush = d3.brush().extent([[0, 0], [width, height]]).on("end", brushended),
          idleTimeout,
          idleDelay = 350;
        g.append("g")
        .attr("class", "brush")
        .call(brush);
  
      // Add a clipPath: everything out of this area won't be drawn when chart is zoomed in
      var clip = svg.append("defs").append("svg:clipPath")
      .attr("id", "clip")
      .append("svg:rect")
      .attr("width", width)
      .attr("height", height)
      .attr("x", 0) 
      .attr("y", 0);
  
      function brushended() {
  
        var s = d3.event.selection;
        //If no selection, re-initialize chart on double click. Otherwise, update x-axis and y-axis domain
        if (!s) {
          // This allows to wait a little bit
          if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);
          x.domain(d3.extent(data, function (d) { return d.x; })).nice();
          y.domain(d3.extent(data, function (d) { return d.y; })).nice();
          y1.domain(d3.extent(data, function (d) { return d.y1; })).nice();
        } else {
          x.domain([s[0][0], s[1][0]].map(x.invert, x));
          y.domain([s[0][1], s[1][1]].map(y.invert, y));
          y1.domain([0, 200]); //hardcoded domain
          //This removes the grey brush area as soon as the selection has been done
          g.select(".brush").call(brush.move, null)
        }
        zoom();
      }
  
      function idled() {
        idleTimeout = null;
      }
  
      function zoom() {
        var t = svg.transition().duration(750);
        svg.select(".x.axis").transition(t).call(xAxis);
        svg.select(".y.axis").transition(t).call(yAxis);
        svg.select(".y1.axis").transition(t).call(yAxis1);
        svg.select(".path1").transition(t).attr("d", lineFunction(data));
        svg.select(".path2").transition(t).attr("d", lineFunctionOne(data));
      }
  </code></pre>