d3 地理变换和缩放答案

【问题标题】：d3 geo transform and scaled3 地理变换和缩放
【发布时间】：2013-12-17 08:33:50
【问题描述】：

我正在尝试使用巴黎地区的地图组合 http://bl.ocks.org/mbostock/4707858 和 http://bl.ocks.org/mbostock/4699541。

我的实现在这里：

http://bl.ocks.org/dvreed77/ad8c1c6cd29d3972eb6c

问题在于它目前的实现方式，放大功能并没有完全放大中心，而是非常接近。我的代码和 Mike Bostock 的代码之间的唯一区别是在 click 函数中注释掉的“翻译”。如果我取消注释，地图会飞出屏幕。我无法理解这种平移和缩放是如何工作的，并且一直试图让它发挥作用。

有人有什么想法吗？

【问题讨论】：

标签： d3.js geo geojson

【解决方案1】：

您当前正在将所选对象的中心平移到 SVG 的左上角。您注释掉的附加翻译负责将其翻译到屏幕中心，但对您不起作用，因为您为投影使用了不同的翻译。

要修复，只需手动添加一半宽度和高度的平移：

var transform = 
  "translate(" + width/2 + "," + height/2 + ")"  +
  "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ")"
  +
  "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")";

完整示例here。

【讨论】：