0

在这里，我想将D3 Band zoom in D3 Heatmap 与可重置缩放相结合。拖动时出现红色条带，但没有缩放。我认为，缩放功能存在一些问题，但我还无法跟踪它。请查看我的小提琴。

缩放功能：

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

在此处输入图像描述

请提出解决方法。先感谢您。

4

2 回答 2

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 docs ondrawImage

于 2015-12-24T10:00:02.863 回答
0

这是一个潜在的解决方案。

首先，抛弃画布。

请改用以下结构：

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

这应该可以解决问题，没有测试过它，你的小提琴很大，这无济于事。

于 2015-12-19T11:06:39.817 回答