我遇到了d3可缩放地图的问题。
我正在从先前构建的topojson文件加载地图,其中包含departments
对象(地图中的区域)和maternidades
对象(地图中的几个点,最初使用十字架渲染) )。
我正在使用d3.behavior.zoom
来实现缩放行为,我希望它能够使用鼠标滚轮进行缩放并使用拖动进行平移。它适用于地图本身(区域)。但是,在任何缩放事件中,地图中的点会立即移动到错误的位置。此外,点的路径以某种方式从十字架变为圆形!
您可以在此处重现问题并查看代码:http://bl.ocks.org/monsieurBelbo/5033491
这是代码:
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.js"></script>
<script src="topojson.v0.min.js"></script>
<html>
<style>
.background {
fill: none;
pointer-events: all;
}
.department {
fill: #aaa;
stroke: #fff;
stroke-width: 1.5px;
}
</style>
<body>
<script>
d3.json("santafe.json", function(error, theProvince) {
var width= 960, height= 500;
var svg = d3.select("body").append("svg");
var departments = topojson.object(theProvince, theProvince.objects.departments);
// The projection
var projection = d3.geo.mercator()
.scale(14000)
.center([-60.951,-31.2])
.translate([width / 2, height / 2]);
// The path
var path = d3.geo.path()
.projection(projection);
// Zoom behavior
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.scaleExtent([height, Infinity])
.scale(projection.scale())
.on("zoom", function() {
projection.translate(d3.event.translate).scale(d3.event.scale)
map.selectAll("path.zoomable").attr("d", path);
});
// The map
var map = svg.append("g")
.classed("provinceMap", true)
.call(zoom);
map.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
// Departments
map.selectAll(".department")
.data(departments.geometries)
.enter().append("path")
.classed("department", true)
.classed("zoomable", true)
.attr("d", path);
// Places
map.selectAll(".place-label")
.data(topojson.object(theProvince, theProvince.objects.maternidades).geometries)
.enter().append("path")
.classed("place", true)
.classed("zoomable", true)
.attr("d", d3.svg.symbol().type("cross"))
.attr("transform", function(d) { return "translate(" + projection(d.coordinates.reverse()) + ")"; });
});
</script>
</body>
</html>
有什么想法吗? 谢谢!
更新
感谢@enjalot的建议,通过重新翻译缩放行为的位置解决了这个问题。只需添加:
map.selectAll(".place").attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; });
缩放行为。在这里查看一个有效的版本:http://tributary.io/inlet/5095947