在D3热图中集成D3 Band变焦

Question

我希望在D3 Band zoom中整合D3 Heatmap with resettable zoom。拖动时出现红色条带，但它没有缩放。我认为，缩放功能存在一些问题，但我还无法跟踪它。请查看我的fiddle。

缩放功能：

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因此您需要检查这一点。

希望这有帮助。

供参考，MDN文档在drawImage

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

那应该做的伎俩，没有经过考验，你的小提琴非常大而且无济于事。