Question

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

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

粗略尝试我只是尝试使用#g-1101的{{1}}来翻译顶级svg > g。在我看来，我的数学是关闭的。

我尝试将g#1101合并到边界框的中点到视口中心，但它的翻译甚至不在球场。

代码

.getBBox().x && .getBBox().y

- 编辑JSBin已被破坏 -

我错过了什么？ JSBin

Answer 1

代码中的一处小改动，将标记为红色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

希望这有帮助

使用d3.behavior.zoom平移/缩放到特定组ID / getBBox（）

1 个答案: