Keep D3 objects size constant on Map while zoom in/out

I am following the example from http://bl.ocks.org/d3noob/raw/5193723/

The cirles drawn in the example increases in size when zoomed-in. I am not able to figure out a way in which the circles' size can be kept same.

Any ideas?

Edit1: Any ideas on how to keep Pie arc constant in radii. I have figured out the the way to keep circles to constant radius as below:

            g1.append("circle")
                .attr("cx", 200)
                .attr("cy", 200)
                .attr("r", 10)
                .style("fill", "red");

        var zoom = d3.behavior.zoom().on("zoom", function () {

                g1.selectAll("circle")
                    .attr("transform", "translate(" + d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")")
                    .attr("r", function(d) {
                        return 10/d3.event.scale;
                    });
            });

Similarly I have arcs of pie chart, the size of which I wish to maintain at zoom:

                    var r = 4;
                    var p = Math.PI * 2;

                    var arc = d3.svg.arc()
                        .innerRadius(r - 2)
                        .outerRadius(r - 1)
                        .startAngle(0)
                        .endAngle(p * d.value1);
                    var arc2 = d3.svg.arc()
                        .innerRadius(r - 3)
                        .outerRadius(r - 2)
                        .startAngle(0)
                        .endAngle(p * d.value2);

                   var projection = d3.geo.mercator()
                        .center([0, 5])
                        .scale(200)

                    var translate = "translate(" + projection([77, 13])[0] + ", " + projection([77, 13])[1] + ")";
                    g.append("path")
                        .attr("d", arc)
                        .attr("fill", "maroon")
                        .attr("transform", translate);
                    g.append("path")
                        .attr("d", arc2)
                        .attr("fill", "green")
                        .attr("transform", translate);

Any suggestions on how to keep the arc type paths to maintain same size?

Answers:

Answer

You'll have to add some additional processing in the zoom event handler. Set the circle's radii to be their nominal value (5) divided by the zoom factor (zoom.scale()). That way, when the zoom scaling is applied the result will be a constant apparent size. Something like:

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))
            .attr("r", 5/zoom.scale());
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 
    });

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.