d3-canvas-brush-zoom-10

d3-canvas-brush-zoom-10.js

function brush_endEvent() {
   const s = d3.event.selection;
   if (!s && lastSelection !== null) {
       // Re-scale axis for the last transformation
       let zx = lastTransform.rescaleX(x);
       let zy = lastTransform.rescaleY(y);

       // Calc distance on Axis-X to use in scale
       let totalX = Math.abs(lastSelection.x2 - lastSelection.x1);

       // Get current point [x,y] on canvas
       const originalPoint = [zx.invert(lastSelection.x1), zy.invert(lastSelection.y1)];
       // Calc scale mapping distance AxisX in width * k
       // Example: Scale 1, width: 830, totalX: 415
       // Result in a zoom of 2
       const t = d3.zoomIdentity.scale(((width * lastTransform.k) / totalX));
       // Re-scale axis for the new transformation
       zx = t.rescaleX(x);
       zy = t.rescaleY(y);
       // Call zoomFunction with a new transformation from the new scale and brush position.
       // To calculate the brush position we use the originalPoint in the new Axis Scale.
       // originalPoint it's always positive (because we're sure it's within the canvas). 
       // We need to translate this originalPoint to [0,0]. So, we do (0 - position) or (position * -1)
       canvasChart
           .transition()
           .duration(200)
           .ease(d3.easeLinear)
           .call(zoom_function.transform,
               d3.zoomIdentity
                   .translate(zx(originalPoint[0]) * -1, zy(originalPoint[1]) * -1)
                   .scale(t.k));
       lastSelection = null;
   } else {
       brushSvg.call(brush.move, null);
   }
}