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