將D3 Band縮放集成到D3熱圖中

Question

在這里，我想將D3波段縮放功能 與可重置縮放功能集成到D3熱圖中 。 拖動時出現紅色帶，但沒有縮放。 我認為，縮放功能存在一些問題，但我還無法跟蹤。 請檢查我的小提琴 。

縮放功能：

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]);
}

請提出解決方法。 先感謝您。

Answer 1

這是一個潛在的基於畫布的解決方案。

您可以修改縮放功能以僅使用圖像的子矩形強制重繪

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 。 我對canvas不熟悉，因此您需要檢查這一點。

希望這可以幫助。

供參考，有關drawImage MDN文檔

Answer 2

這是一個潛在的解決方案。

首先，拋開畫布。

請改用以下結構：

 <svg> <g id="x axis"> // ... </g> <g id="y axis"> // ... </g> <svg id="imageContainer" viewbox="0 0 heatmapDim[0] heatmapDim[1]"> <image xlink:href="yourHeatmap"/> </svg> </svg> 

此處的關鍵是使用第二個<svg> （#imageContainer）的viewBox屬性。 這將允許您在圖像上定義一個子窗口

並修改您的縮放

 function zoom() { //recalculate domains var x0,x1,y0,y1; if(zoomArea.x1 > zoomArea.x2) { x0 = zoomArea.x2; x1 = zoomArea.x1; } else { x0 = zoomArea.x1; x1 = zoomArea.x2; } if(zoomArea.y1 > zoomArea.y2) { y0 = zoomArea.y2 y1 = zoomArea.y1; } else { y0 = zoomArea.y1; y1 = zoomArea.y2; } d3.select("#imageContainer").attr("viewBox",x0 + " " + y0 + " " + x1 + " " + y1); } 

那應該可以解決問題，還沒有測試過，您的小提琴相當大，沒有幫助。