1

我在使用 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

4

0 回答 0