D3 Scale SVG children
<p>I am using topojson with D3 to create a map. On the map im doing the following to plot locations. However when you zoom into the map i want the .place circle's to get smaller on zoom.</p>

<p><strong>Objects</strong></p>

<pre><code>var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "map");

var g = svg.append("g")
    .call(zoom);

var map = g.append("g")
    .attr("transform", "translate(0,0) scale(1)");
</code></pre>

<p><strong>Scaling</strong></p>

<pre><code>s = 4000;

zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([s, s * 4])
    .on("zoom", zoommove);
</code></pre>

<p><strong>Plotting the places:</strong></p>

<pre><code>topGroup = map.append('g').attr('id', 'mapGroup');

topGroup.selectAll(".place")
    .data(topojson.feature(mapData, transformedPlotData).features)
    .enter()
    .append("circle")
    .attr('cx', function(d) { return path.centroid(d)[0] })
    .attr('cy', function(d) { return path.centroid(d)[1] })
    .attr("r", 4);
</code></pre>

<p><strong>Zoom</strong></p>

<pre><code>function zoommove() {

    var t1 = projection.translate(),
        t2 = d3.event.translate,
        t = [t2[0]-t1[0], t2[1]-t1[1]];

    map.attr("transform",
        "translate("+t+") " +
        "scale("+(d3.event.scale/s)+")"
    );

}
</code></pre>

<p>Thanks all</p>