javascript - d3 map 点只绘制在左上角

Question

我有一个项目，我想在 D3 中的旧金山 map 上绘制点，问题是该点仅显示在左上角。

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

// 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、longheleft和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)  

为什么这些点没有绘制在它们在 map 上的坐标上？

已查看此答案: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] 居中值并将位于左上角。