Точка карты 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);

Как рисуются точки (все координаты точек находятся между реброми, длинными и длинными)

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)  

Почему эти точки не нарисованы на их координатах на карте?

Allready просмотрел этот ответ: Вопрос о стеке d3js-scale-transform и translate