D3.js 使用D3呈现geoJSON，使用imageOverlay呈现传单

快速版本：在传单显示的静态图像上显示d3元素时遇到问题。如果我使用d3noob的（）示例，它是可以工作的……但是我在扩展它时遇到了困难。我猜这是因为朗朗和冗长的翻译或投影，但我不确定我需要改变什么。我试图在图像的中心显示geoJSON（我在JSFIDLE上的代码：）

较长版本： 我正试图扩展d3noob的示例，以便可以使用传单和D3在静态图像上显示geoJSON（不幸的是，这是我老板的要求）。我能够重现d3noob基于tile的示例，但在静态版本中遇到了问题

我可以显示静态图像，但无法在图像上显示蓝色矩形。我不确定我需要做什么来操纵JSON中描述的蓝色矩形的位置

我尝试过在projectPoint函数中设置坐标，但没有成功：

function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}

在这个阶段，我想我需要描述一个新的投影，但我不确定是什么。 下面是我用来显示静态图像的代码：

var map = new L.Map("map", {maxZoom:1,center: [0,0], zoom: 3,crs:L.CRS.Simple});
var southWest = map.unproject([0,882],map.getMaxZoom());
var northEast = map.unproject([1085,0],map.getMaxZoom());
var imageBounds = new L.LatLngBounds(southWest,northEast);
L.imageOverlay('http://www.w3schools.com/css/trolltunga.jpg',imageBounds).addTo(map);
map.fitBounds(imageBounds);

如果有人能提出一个策略来调整矩形的位置，那就太好了（我对d3和传单不熟悉） 非常感谢

---

G

因此，经过一些修补，我发现创建一个新的投影使我能够设置位置并缩放地图，以便将其放置在需要的位置：

var center=d3.geo.centroid（geoShapeInstance）；
var标度=[800000]；
var偏移量=[175,1]；
var projection=d3.geo.mercator（）.scale（scale）、center（center）、translate（offset）；
var path=d3.geo.path（）.projection（projection）

摆弄“offset”变量可以设置位置，玩“scale”变量可以调整地图大小（scale是一个[x，x]值）

希望这对某人有所帮助。
因此，经过一些修补，我发现创建一个新的投影使我能够设置位置并缩放地图，以便将其放置在需要的位置：

var center=d3.geo.centroid（geoShapeInstance）；
var标度=[800000]；
var偏移量=[175,1]；
var projection=d3.geo.mercator（）.scale（scale）、center（center）、translate（offset）；
var path=d3.geo.path（）.projection（projection）

摆弄“offset”变量可以设置位置，玩“scale”变量可以调整地图大小（scale是一个[x，x]值）

希望这对别人有帮助