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