d3.js - 在 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]);