[英]D3.js Plot Point on Map
I'm trying to plot a circle on a map using d3 and topojson, but I can't figure it out. 我正在尝试使用d3和topojson在地图上绘制一个圆,但我无法弄清楚。 Here is my code
这是我的代码
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);
});
The issue you're seeing (or not seeing) is because you have defined a projection in this line: 您看到(或看不到)的问题是因为您在此行中定义了一个投影:
var projection = d3.geo.mercator()
.center([0, 5 ])
.scale(900)
.rotate([-180,0]);
Which you use to transform your coordinates. 用于转换坐标的坐标。 Then, the projections for paths of the topojson data are set with this:
然后,使用以下方法设置topojson数据路径的投影:
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
So, the topojson renders using a mercator projection with no transforms where as your circle renders using a mercator projection that has been transformed. 因此,topojson使用没有变换的墨卡托投影进行渲染,而您的圈子使用已变形的墨卡托投影进行渲染。
I'm not entirely sure how you want you're final map to look, but assuming that it's a world map with a dot in Africa just comment out the centre, scale and rotate lines in the projection definition as in: 我不确定您希望最终地图的外观如何,但是假设这是一幅在非洲带有点的世界地图,只需注释掉投影定义中的中心线,比例尺和旋转线即可,如下所示:
var projection = d3.geo.mercator();
//.center([0, 5 ])
//.scale(900)
//.rotate([-180,0]);
And replace the d3.geo.path in the svg.append block with path as in: 并将svg.append块中的d3.geo.path替换为path,如下所示:
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
to 至
.attr("d", path);
Oh, and if you haven't you'll need to give the circle some fill, so something like 哦,如果还没有,则需要给圆填充一些,所以像
.style("fill", "red") .style(“ fill”,“ red”)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.