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?

回答1:

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)); 
    });

来源：https://stackoverflow.com/questions/27460534/keep-d3-objects-size-constant-on-map-while-zoom-in-out