Javascript 带有D3js的Pin标记
我正在实现一个地图,该地图将按纬度和经度进行标记。我使用D3Js从topojson文件创建svg 这就是实现:Javascript 带有D3js的Pin标记,javascript,d3.js,svg,Javascript,D3.js,Svg,我正在实现一个地图,该地图将按纬度和经度进行标记。我使用D3Js从topojson文件创建svg 这就是实现: var places = [ { name: "Longo, England", location: { latitude: 51.5, longitude: -0.116667 } }, {
var places = [
{
name: "Longo, England",
location: {
latitude: 51.5,
longitude: -0.116667
}
},
{
name: "Dublin, Irland",
location: {
latitude: 53.428590,
longitude: -6.188024
}
}
]
var margin = {top: 10, left: 10, bottom: 10, right: 10};
var width = parseInt(d3.select('#map').style('width'));
width = width - margin.left - margin.right;
var mapRatio = 1;
var height = width * mapRatio;
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data/uk.json", function(error, uk) {
if (error) return console.error(error);
var subunits = topojson.feature(uk, uk.objects.subunits);
var projection = d3.geo.mercator()
.center([0, 55.4])
.rotate([4.4, 0])
.scale(500)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
svg.append("path")
.datum(subunits)
.attr("d", path)
.attr("class", "subunit-boundary IRL");
svg.selectAll(".subunit")
.data(topojson.feature(uk, uk.objects.subunits).features)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path);
svg.selectAll(".pin")
.data(places)
.enter()
.append('image')
.attr('class', 'datamaps-pin')
.attr('xlink:href', 'http://a.tiles.mapbox.com/v3/marker/pin-m+7e7e7e@2x.png')
.attr('height', 40)
.attr('width', 40)
.attr("transform", function(d) {
return "translate(" + projection([
d.location.longitude,
d.location.latitude
]) + ")"
});
但是,销未定位
当我改变简单点的标记时,它应该在正确的位置
svg.selectAll(".pin")
.data(places)
.enter().append("circle", ".pin")
.attr("r", 5)
.attr("transform", function(d) {
return "translate(" + projection([
d.location.longitude,
d.location.latitude
]) + ")"
});
如果未指定任何x或y,将围绕原点x绘制一个圆,y=0。但是,如果未指定x或y,则绘制图像时其左上角位于原点 要获得与圆相同的效果,请添加
.attr("x", -20)
.attr("y", -20)
到pin的图像版本