css - SVG 未在 Google 地图的可见区域之外绘制

Question

我使用 Mike Bostok 的示例将 d3 与 Google Maps 一起使用来显示等高线图。这是我的代码：

http://bl.ocks.org/4959573

一切似乎都很好，除了等高线图没有绘制在谷歌地图的可见区域之外。我设法通过使用地图的尺寸​​来解决这个问题：

#map {
  width: 100%;
  height: 3000px;
  top: -1000px;
}

这不是最优的，也不能完全解决问题，因为如果我放大太多，绘图的大小将迅速超过地图的大小，并且平移地图会使其可见。

有没有其他方法可以解决它？

Answer 1

OP对自己问题的解决方案，从评论中引用并重新格式化：

我将地图样式更改为：

#map {
  width: 100%;
  height: 100%;
}

轮廓层的样式修改如下：

cont_layer
    .attr("width","8000px")
    .attr("height","8000px")
    .style("position","absolute")
    .style("top","-4000px")
    .style("left","-4000px");

SVG 路径的 x 和 y 坐标必须移动 +4000px 以进行补偿。