3

我在 d3.js 中放大地图时遇到问题。我将一些节点放在附近的地方，它会相互重叠，如果我缩放该地图，完整的图像得到缩放，但我只想缩放地图，节点（圆圈）应该在同一个地方，就像 d3.js 中地图上的语义缩放一样

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

我的jsfiddle 链接

如何在地图上实现语义缩放？

任何人帮助我将不胜感激！

4

0 回答 0