Увеличить мягко в центр карты D3

Question

У меня есть interactive map. Эта карта может быть увеличена с помощью кнопок. Эти кнопки уже работают, но мне не нравится текущий стиль. Он не чувствует себя UX-совместимым, когда нажав кнопку, карта немного встряхивается. Вместо этого я хотел бы увеличить масштаб карты.

Здесь зум в код на кнопку :

d3.select('#zoomplusbutton').on('click', function() { 
    ardamap.zoomByFactor(1.3); 
}); 

А вот код функции со странным масштабированием:

zoomByFactor: function (factor) { 
       d3.event.preventDefault(); 
       var scale = zoom.scale(); 
       var extent = zoom.scaleExtent(); 
       var newScale = scale * factor; 
       if (extent[0] <= newScale && newScale <= extent[1]) { 
        var t = zoom.translate(); 
        var c = [width/2, height/2]; 
        zoom 
         .scale(newScale) 
         .translate([c[0] + (t[0] - c[0])/scale * newScale, c[1] + (t[1] - c[1])/scale * newScale]) 
         .event(g.transition()); 
       } 
      } 

Я действительно больше не знаю Я получил код масштабирования.

Итак, как я могу повернуть масштаб в центр карты мягко? Не стесняйтесь изменять JS-код на веб-сайте.

Answer 1

Через несколько часов выяснилось решение «ОК». Это не совершенно центр, но в конце без встряхивания и любых другие плохого поведения:

zoomButton: function (zoom_in) { 
      var scale = zoom.scale(), 
       extent = zoom.scaleExtent(), 
       translate = zoom.translate(), 
       x = translate[0], y = translate[1], 
       factor = zoom_in ? 1.3 : 1/1.3, 
       target_scale = scale * factor; 
      if (target_scale === extent[0] || target_scale === extent[1] || target_scale > extent[1] || target_scale < extent[0]) { return false; } 
      var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale)); 
      if (clamped_target_scale != target_scale){ 
       target_scale = clamped_target_scale; 
       factor = target_scale/scale; 
      } 
      x = (x - center[0]) * factor + center[0]; 
      y = (y - center[1]) * factor + center[1]; 
      if (zoom_in){ 
       x = x - 500; 
      }else{ 
       x = x + 500; 
      } 
      d3.transition().duration(450).tween("zoom", function() { 
       var interpolate_scale = d3.interpolate(scale, target_scale), 
        interpolate_trans = d3.interpolate(translate, [x,y]); 
       return function (t) { 
        zoom.scale(interpolate_scale(t)) 
         .translate(interpolate_trans(t)); 
        ardamap.zoomedButton(); 
       }; 
      }); 
     } 

Этих расчетов работает очень хорошо. А вот две кнопки повышения события:

d3.select('#zoomplusbutton').on('click', function(){ 
    ardamap.zoomButton(true); 
}); 
d3.select('#zoomminusbutton').on('click', function() { 
    ardamap.zoomButton(false); 
}); 

Вы можете найти обновление кода на arda-maps.org, а также. Если у вас есть исправление для действительно идущего в центр текущей карты, не стесняйтесь редактировать мой ответ. Я все еще заинтересован в улучшении этого!