To integrate D3 Band zoom in D3 heatmap

Here I want to integrate D3 Band zoom in D3 Heatmap with resettable zoom. The red band appears while dragging, but it didn't zoom. I think, there some issue in zoom function, but i couldn't track it yet. Please check out my fiddle.

Zoom function:

function zoom() {

    //recalculate domains
  if(zoomArea.x1 > zoomArea.x2) {
      x.domain([zoomArea.x2, zoomArea.x1]);
    } else {
      x.domain([zoomArea.x1, zoomArea.x2]);
    }

    if(zoomArea.y1 > zoomArea.y2) {
      y.domain([zoomArea.y2, zoomArea.y1]);
    } else {
      y.domain([zoomArea.y1, zoomArea.y2]);
    }

    var t = svg.transition().duration(750);
    t.select(".x.axis").call(scale[X]);
    t.select(".y.axis").call(scale[Y]);
}

Please suggest a method to resolve it. Thank you in advance.

Here is a potential canvas-based solution.

You can modify your zoom function to force a redraw using only a sub rectangle of the image with

context.drawImage(image,sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Then give sx,sy top-left coordinates of your selection rectangle, and sWidth,sHeight width and size of selection rectangle.

dx,dy,dWidth,dHeight are constant in your case, 0,0,canvasWidth,canvasSize

You will probably need to modify createImageObj to also use drawImage rather than putImage. I am not familiar with canvas so you need to check this point.

Hope this helps.

For reference, MDN docs on drawImage