集成D3 Band放大D3热图 [英] To integrate D3 Band zoom in D3 heatmap

问题描述

在这里，我要在

请建议一种解决方法。

解决方案

这是一个潜在的基于画布的解决方案。

您可以修改缩放功能，仅使用图片的子矩形强制重画。

  context.drawImage （image，sx，sy，sWidth，sHeight，dx，dy，dWidth，dHeight）; 
  

然后给出 sx，sy 选择矩形的坐标和 sWidth，sHeight 选择矩形的宽度和大小。

dx，dy，dWidth，dHeight 在您的情况下是常数， 0,0，canvasWidth，canvasSize

您可能需要修改createImageObj以使用 drawImage ，而不是 putImage 。我不熟悉画布所以你需要检查这一点。

希望这有助于。

作为参考，MDN文档在 drawImage

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

这篇关于集成D3 Band放大D3热图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！