D3.js지도상의 플롯 포인트

Question

d3과 topojson을 사용하여지도에 원을 그려보고 싶습니다. 그러나 그것을 이해할 수는 없습니다. 다음은이 라인에서 프로젝션을 정의하기 때문에

var width = 960, 
height = 500; 

var projection = d3.geo.mercator() 
    .center([0, 5 ]) 
    .scale(900) 
    .rotate([-180,0]); 

var svg = d3.select("#map").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("class", "svg-map"); 

var path = d3.geo.path() 
    .projection(projection); 

var g = svg.append("g"); 
d3.json("/static/lib/topojson/world-110.json", function(error, topology) { 
    svg.append("path") 
     .datum(topojson.feature(topology, topology.objects.countries)) 
     .attr("d", d3.geo.path().projection(d3.geo.mercator())); 

    var coordinates = projection([10,20]) 
    svg.append('svg:circle') 
     .attr('cx', coordinates[0]) 
     .attr('cy', coordinates[1]) 
     .attr('r', 5); 
}); 

Answer 1

문제는 보는 (또는 표시되지 않는) 것입니다 내 코드입니다 : 당신이 당신의 좌표를 변환하는 데 사용

var projection = d3.geo.mercator() 
    .center([0, 5 ]) 
    .scale(900) 
    .rotate([-180,0]); 

. 그리고, topojson 데이터 경로에 대한 예측이 설정되어

.attr("d", d3.geo.path().projection(d3.geo.mercator())); 

그래서 topojson가 원이 변형 된 Mercator 투영법을 사용하여 렌더링하는없이 변환와 Mercator 투영법을 사용하여 렌더링한다.

최종지도를 어떻게 보이길 원합니까?하지만 아프리카에서 점이있는 세계지도라고 가정하면 투영 정의에서 선을 가운데에 주석으로 표시하고 회전 할 수 있습니다.

var projection = d3.geo.mercator(); 
    //.center([0, 5 ]) 
    //.scale(900) 
    //.rotate([-180,0]); 

와 같이 대체 경로로 svg.append 블록의 d3.geo.path :

.attr("d", d3.geo.path().projection(d3.geo.mercator())); 

.attr("d", path); 

,745,151 행

아, 그리고 당신은 당신이