Чтобы интегрировать D3 Band zoom в D3 heatmap

Question

Здесь я хочу интегрировать D3 Band zoom в 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]);
}

Пожалуйста, предложите метод, чтобы решить это. Заранее спасибо.

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>

Ключевым моментом здесь является использование атрибута viewBox второго <svg> (#ImageContainer). Это позволит вам определить подокно на вашем изображении

И измени свой масштаб

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

Это должно сработать, не проверял, думал, ваша скрипка довольно большая, и это не помогает.