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渲染采用墨卡托投影，没有变换，其中作为你的圈子渲染使用已转化的墨卡托投影。

我不完全确定你是如何让你成为最终地图的，但假设它是一个非洲点的世界地图，只需在投影定义中注释中心，缩放和旋转线条，如下所示：

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

哦，如果你没有，你需要给圆一些填充，所以像

.style（“补”，“红”）