D3.js d3可缩放地图的问题_D3.js

D3.js d3可缩放地图的问题

d3.js

D3.js d3可缩放地图的问题,d3.js,D3.js,我对d3可缩放地图有问题我从以前构建的topojson文件加载地图，其中一个departmentsobject是地图中的区域，另一个maternidadesobject是地图中的几个点，最初用十字线渲染我使用d3.behavior.zoom来实现缩放行为，我希望它能够使用鼠标滚轮进行缩放，并通过拖动进行平移。它与地图本身和区域配合得很好。但是，在任何缩放事件中，地图中的点会立即移动到错误的位置。此外，点的路径也会以某种方式从十字变为圆您可以在此处复制问题并查看代码：以下是代码： <

我对d3可缩放地图有问题

我从以前构建的topojson文件加载地图，其中一个departmentsobject是地图中的区域，另一个maternidadesobject是地图中的几个点，最初用十字线渲染

我使用d3.behavior.zoom来实现缩放行为，我希望它能够使用鼠标滚轮进行缩放，并通过拖动进行平移。它与地图本身和区域配合得很好。但是，在任何缩放事件中，地图中的点会立即移动到错误的位置。此外，点的路径也会以某种方式从十字变为圆

您可以在此处复制问题并查看代码：

以下是代码：

<!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>

缩放行为。在此处查看工作版本：

在line projection.translated3.event.translate.scaled3.event.scale中，您正在平移和缩放投影；在line map.selectAllpath.zoomable.attrd中，使用类zoomable根据这些新坐标重新绘制每个路径的路径。交叉点本身是具有可缩放类的路径，这就是您丢失它们的原因。是的，但是如果我只在地图中重新绘制部门。选择AllPath.department.attrd，路径交叉点保持不变，但它们不会随着地图缩放而缩放和平移。我能做些什么@seb？

map.selectAll(".place").attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; });