缩放D3.js中的地理坐标

Question

我喜欢在每个坐标中画一个圆圈.只使用width,height以及coordinates,如何调整坐标？我对D3.js很新,我猜我在投影部分做错了.

var width = 200,
    height = 200;
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var coordinates = [ [43.08803611,-79.06312222], 
                    [43.09453889,-79.05636667] ];

var group = svg.append('g');

var projection = d3.geo.mercator()
                        .translate([width,height]);

var projectedCoordinates = [];
for (var i=0; i<coordinates.length; i++) {
    projectedCoordinates[i] = projection(coordinates[i]);
}

group.selectAll("circle")
    .data(projectedCoordinates)
    .enter()
    .append("circle")
    .attr("r",4)
    .attr("cx", function(d){ return d[0]; })
    .attr("cy", function(d){ return d[1]; });    

Answer 1

您几乎就在那里,唯一的问题是您的投影是在绘图区域外投影坐标.您可以使用该.center()功能告诉投影中心的位置并.scale()"放大".您还应该仅将投影转换为容器宽度和高度的一半,否则中心将位于右下角.

以下示例值应该使您能够看到点:

var projection = d3.geo.mercator()
                    .center([43.09, -79.06])
                    .scale(50000)
                    .translate([width/2,height/2]);