Question

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

我的实施在这里：

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

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

有人有什么想法吗？

Answer 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。

d3地理变换和规模

1 个答案: