score:2

Accepted answer

http://jsfiddle.net/8oo3ocfs/

    var zoom = d3.behavior.zoom() //zoomyaxis
   .x(xscale)
   .y(yscaleleft)
   .on("zoom", function(){
      // don't let double-click or scroll wheel do anything
      if (d3.event.sourceevent == null || d3.event.sourceevent.type == "wheel"){
         zoom.scale(previousscale);
         zoom.translate(previoustranslate);
         zoomright.scale(previousscale);
         zoomright.translate(previoustranslate);
         return;
      }

      // set previous scale for future use
      previousscale = zoom.scale();
      previoustranslate = zoom.translate();

      //zoom.translate(panlimit());
      //zoomright.translate(zoom.translate());

      // update the right side scale
      zoomright.scale(previousscale);
      zoomright.translate(previoustranslate);

      // redraw lines
      svg.select("path.line.lineleft").attr("d", linecases(data));
      svg.select("path.line.lineright").attr("d", linedeaths(data));

      // redraw axes
      svg.select(".x.axis").call(xaxis);
      svg.select(".y.axis.yleft").call(yaxisleft);
      svg.select(".y.axis.yright").call(yaxisright);
   });

i eventually got this working. i don't need the clip-path to work in the jsfiddle because it works in our actual project. additionally, i didn't end up limiting the pan functionality because it got very complex with the math. so i just put a reset button on it.


Related Query