How do I implement semantic zoom over d3.js map

Question

I have problem in zooming on map in d3.js. I put some nodes in near places it would overlap on each other and if i zoom that map complete image getting zoom but i want to zoom only map and node(circle) should be at same place like semantic zoom on map in 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>

My jsfiddle link

How do i implement semantic zoom on map?

Anyone helps me would be much appreciate!

I could not find any way to implement zoom on map in that link — Maddy Chavda, Apr 02 '15 at 10:58
basically when you zoom in all you do is scale the 'nodes' by the amount you zoom. So if you zoom in by 2, then the with of the node will be nodeWidth/2. Thats what the translate function does at the bottom of the links code — AJ_91, Apr 02 '15 at 11:00
I tried to do that but could not work for me. Can you provide me simple example? — Maddy Chavda, Apr 02 '15 at 11:34
so, in the zoom function you need to change the size of the node, so the radius. But to do this you need to know the value of the scale. I've not worked with maps before in D3, nor the projection you are using so Im unsure how to go about yours tbh. But like I said, find the value of the scale and change the size of the node according to that — AJ_91, Apr 02 '15 at 11:46

How do I implement semantic zoom over d3.js map

0 Answers0