title: Keep D3 objects size constant on Map while zoom in/out
body: <p>I am following the example from <a href="http://bl.ocks.org/d3noob/raw/5193723/" rel="nofollow">http://bl.ocks.org/d3noob/raw/5193723/</a></p>
  
  <p>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. </p>
  
  <p>Any ideas?</p>
  
  <p><strong>Edit1</strong>: 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:</p>
  
  <pre><code>            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;
                      });
              });
  </code></pre>
  
  <p>Similarly I have arcs of pie chart, the size of which I wish to maintain at zoom:</p>
  
  <pre><code>                    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);
  </code></pre>
  
  <p>Any suggestions on how to keep the arc type paths to maintain same size?</p>