Question

我有一个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();
    };
  });
}

D3缩放行为转到右上方

0 个答案: