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

- Fen1kz

---

只有你关于 SVG 缩放的代码示例帮了我 :) - fedor.chernolutsky

Answer 1

在设置所需的翻译和缩放后，您必须明确地在正确的元素上使用调用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可以提供该功能。

- musically_ut

---

谢谢。我的主要问题在于SVG视图框的设置，我对于用负数x=宽度/2和y=高度/2的视图框来实现简单居中毫无头绪。 - Fen1kz