[D3][SVG] 缩放到对象

Question

你能帮我缩放到 SVG 对象吗？不知道该怎么做。我需要通过单击对象来缩放和居中，我做了一个测试 plunkr，所以请看一下：http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF
这是完整的代码：

$(function(){
  svg = d3.select("#svg");
  svg_group = d3.select('#outer_group');

  zoom = d3.behavior.zoom()
      .translate([0, 0])
      .scale(1)
      .scaleExtent([.5, 20])
      .on("zoom", zoomed);

  svg.call(zoom);

  function zoomed() {
    svg_group.style("stroke-width", 1.5 / d3.event.scale + "px");
    svg_group.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    $zoomService.$broadcast('zoom', {
        scale: d3.event.scale
    });
  }

  $('.sector').click(function(){
    //zoom to somehow??
  });
});

Answer 1

设置所需的平移和缩放后，您必须在正确的元素上明确使用 call zoom.event。

  var zoomed = false;
  $('.sector').click(function(){
    var bbox = this.getBBox();
    var scale = 4;

    // Manually calculating the position to which to transition to
    // Will differ on a case by case basis.
    svg
    .call(zoom
          .translate([ (- bbox.x - bbox.width / 2) * scale
                     , (- bbox.y - bbox.height / 2) * scale
                     ])
          .scale(scale).event
    );
  });

演示：http://plnkr.co/edit/h1UP87dfQneRCFye9Xtu?p=preview

在演示中，我更改了多边形的位置和 svg 上的 viewBox，以便更容易计算要过渡到的确切坐标，以使缩放保持居中。我还添加了上面代码摘录中未显示的一些过渡和缩放到零行为。

旁注： 您不必在此处使用 jQuery 来绑定到 click 事件； D3 的 selection.on 可以提供该功能。

[D3][SVG] 缩放到对象

[D3][SVG] zoom to object

svg

d3.js

zooming