我在d3.js中放大地图时遇到问题我把一些节点放在附近的地方,它会相互重叠,如果我缩放那个地图完整的图像得到缩放,但我想只放大地图和节点(圆圈)应该在同一个地方,如d3.js中地图上的语义缩放< / p>
<head>
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
.cnode {
stroke: yellow;
stroke-width: 2px;
}
</style>
</head>
<body>
<script src="d3.v3.min.js"></script>
<script src="topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.center([0, 5])
.scale(200)
.rotate([-180, 0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
var data = [{
"code": "TYO",
"city": "TOKYO",
"country": "JAPAN",
"lat": "35.68",
"lon": "139.76"
}, {
"code": "OSK",
"city": "Osaka",
"country": "JAPAN",
"lat": " 34.40",
"lon": "135.37"
}, {
"code": "HISH",
"city": "Hiroshima",
"country": "JAPAN",
"lat": "34.3853",
"lon": "132.4553"
}, {
"code": "BKK",
"city": "BANGKOK",
"country": "THAILAND",
"lat": "13.75",
"lon": "100.48"
}, {
"code": "DEL",
"city": "DELHI",
"country": "INDIA",
"lat": "29.01",
"lon": "77.38"
}, {
"code": "SEA",
"city": "SEATTLE",
"country": "USA",
"lat": "38.680632",
"lon": "-96.5001"
}];
// load and display the World
d3.json("https://gist.githubusercontent.com/d3noob/5189284/raw/598d1ebe0c251cd506c8395c60ab1d08520922a7/world-110m2.json", function(error, topology) {
// load and display the cities
function drawMap(data) {
//d3.csv("cities.csv", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("a")
.attr("xlink:href", function(d) {
return "https://www.google.com/search?q=" + d.city;
})
.append("circle")
.attr("class", "cnode")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 8)
.style("fill", "red");
//});
}
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path);
drawMap(data);
});
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom", function() {
g.attr("transform", "translate(" +
d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")");
g.selectAll("circle")
.attr("d", path.projection(projection));
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
</script>
</body>
如何在地图上实现语义缩放?
任何帮助我的人都会非常感激!