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