Javascript d3地图点仅绘制在左上角

我有一个项目，我想在圣弗朗西科地图D3中画点，问题是点只显示在左上角

基于坐标计算投影的比例和平移

// Set up size
var width = 1000,
height = width;

//coordinates
var lattop = 37.8423216;
var lonleft = -122.540474;
var lonright = -122.343407;

//calculate scale
var scale = 360*width/(lonright-lonleft);
//var scale = Math.min(width/ Math.PI, height/ Math.PI)

// Set up projection that map is using
var projection = d3.geo.mercator()
.scale(scale)
.translate([0,0]);

var trans = projection([lonleft, lattop]);
projection.translate([-1*trans[0],-1*trans[1]]);

var path = d3.geo.path().projection(projection);

var imagebox = d3.select("#map").append("svg").attr("width",width).attr("height",height);

点的绘制方式（点的所有坐标位于lattop、longleft和longright之间）

为什么这些点没有画在地图上的坐标上？

---

Allready查看了此答案：

您没有正确使用投影：

return projection(d.X);

在大多数情况下，像您这样的普通墨卡托（除外），投影点的x或y值取决于纬度和经度。d3地质投影设计用于大多数情况，因此您必须提供纬度和经度：

return projection([d.X,d.Y])[0] // cx
return projection([d.X,d.Y])[1] // cy

提供一个值将返回一个NaN值，SVG渲染器通常将这些值渲染为零，这意味着您的所有点都将获得[0,0]居中值，并将位于左上角

return projection([d.X,d.Y])[0] // cx
return projection([d.X,d.Y])[1] // cy