d3地图点只绘制在topleft角落

Question

我有一个项目，我想在D3中的San Fransico地图上绘制点，问题是该点仅显示在topleft角落。

根据坐标计算投影的比例和平移。

// 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之间）

points = data
allDataLayer = imagebox.append("g");

var category = {}
allDataLayer.selectAll("circle")
.data(points).enter()
.append("circle")
.attr("class", "circles")
.attr("cx", function (d) { console.log(d.X); return projection(d.X); })
.attr("cy", function (d) { return projection(d.Y); })
.attr("r", "20px")
.attr("fill", "#C300C3")
.style("opacity", 0.5)  

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

已经查看了这个答案：Stackoverflow question d3js-scale-transform and translate

Answer 1

您没有正确使用投影：

return projection(d.X);

在大多数情况下，像您这样的普通未经修饰的墨卡托除外，投影点的x或y值取决于纬度和经度。 d3 geoProjection大部分时间都是设计的，因此您必须同时提供纬度和经度：

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

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