Поведение D3 Zoom в правом верхнем углу - PullRequest
Новая
       17

Поведение D3 Zoom в правом верхнем углу

0 голосов
/ 04 сентября 2018

У меня проблема с масштабированием d3 svg ... Мои 2 функции масштабирования, увеличение и уменьшение масштаба в 1 клик и 1 масштабирование колесика мыши, они работают правильно при использовании отдельно - моя проблема при использовании мой зум мыши, а затем я выполняю функцию щелчка, это когда начинается странное поведение. При щелчке функции масштабирования svg переходит вправо и затем перемещается в правильную точку x и y с корректной предыдущей перспективой увеличения, но затем, если вы прокрутите мышь, чтобы увеличить масштаб, svg переходит к координатам x в в правой верхней части экрана, что-то идет не так, но мои навыки в d3 отсутствуют ... Проблема в том, что мои функции масштабирования перезаписывают друг друга вместо того, чтобы играть друг с другом в мяч ... любые предложения будут чрезвычайно оценены как тонн! 

function zoomHandler() {
   svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}

d3.selectAll('.zoom_button').on('click', zoomClick);

var zoom = d3.behavior.zoom()
.scaleExtent([0.1, 1.75])
.on("zoom", zoomed);

function zoomed() {
   svg.attr("transform","translate(" + zoom.translate() + ")" +"scale(" + zoom.scale() + ")");
   $('.popover').popover('hide');
}

function zoomClick() {

  var clicked = d3.event.target,
  direction = 1,
  factor = 0.2,
  target_zoom = 1,
  center = [width / 2, height / 2],
  extent = zoom.scaleExtent(),
  translate = zoomListener.translate(),
  translate0 = [],
  l = [],
  view = {x: translate[0], y: translate[1], k: zoomListener.scale()};

  d3.event.preventDefault();

  direction = (this.id === 'zoom_in') ? 1 : -1;
  target_zoom = zoom.scale() * (1 + factor * direction);

  if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; }

  translate0 = [(view.x) / view.k, (view.y) / view.k];
  view.k = target_zoom;
  l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

  view.x += center[0] - l[0];
  view.y += center[1] - l[1];

  interpolateZoom([view.x, view.y], view.k);

}

function interpolateZoom (translate, scale) {
  return d3.transition().duration(200).tween("zoom", function () {
    var iTranslate = d3.interpolate(zoom.translate(), translate),
    iScale = d3.interpolate(zoom.scale(), scale);
    return function (t) {
      zoom
    .scale(iScale(t))
    .translate(iTranslate(t));
    zoomed();
    };
  });
}
...