javascript - 使用d3.behavior.zoom平移/缩放到特定的组ID/getBBox()

我正在尝试使用d3.behavior.zoom()功能制作交互式平移/缩放SVG平面图/地图。我的代码宽松地基于Zoom to Bounding Box II。

我通过$.get()异步加载svg，然后使用button.on('click')处理程序通过元素ID .getBBox()（在svg上表示为红色圆圈）获取特定<g>的#g-1101。然后，我想将svg的视口居中到#g-1101边界框的中间。

作为粗略的尝试，我只是尝试使用svg > g的g#1101来翻译顶级.getBBox().x && .getBBox().y。在我看来，我的数学不对了。

我尝试将(svg.node().getBBox().width / 2) - scale * g.getBBox().x)合并到边界框的中间点到视口的中心，但是它的平移甚至不在球场上。

码

(function(){

 var svg, g; $.get('http://layersofcomplexity.com/__fp.svg', function(svg){
   $('body').append($(svg));
   init();
  },'text');

  function init() {

    console.log('init');

   svg = d3.select('svg');
   g = d3.select('svg > g');

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

    svg
    .call(zoom)
    .call(zoom.event);

    $('.pan').on('click', function(){
//       var id = '#g-1011';
      var scale = 4;
      var bbox = $('#g-1101')[0].getBBox();
//       d3.select(id).node().getBBox();
      var x = bbox.x;
      var y = bbox.y;
      // var scale = .9 / Math.max(dx / width, dy / height),
      // var translate = [width / 2 - scale * x, height / 2 - scale * y];
      var width = svg.node().getBBox().width;
      var height = svg.node().getBBox().height;
      var translate = [-scale*x,-scale*y];
      g.transition().duration(750) .call(zoom.translate(translate).scale(scale).event);
    });

  }

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

})();

-编辑JSBin被打破了-

我想念什么？ JSBin。

最佳答案

您的代码做了一个小小的改动，以红色标记的g#g-1101居中

  var bbox = $('#g-1101')[0].getBBox();


  var x = bbox.x-((bbox.width));
  var y = bbox.y-((bbox.height));
  //scale should be 1 less
  var translate = [-(x*(scale-1)),-(y*(scale-1))];

工作代码here

希望这可以帮助

关于javascript - 使用d3.behavior.zoom平移/缩放到特定的组ID/getBBox()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33587735/