D3 Scale SVG Kinder

Question

Ich benutze Topojson mit D3, um eine Karte zu erstellen. Auf der Karte mache ich folgendes um Orte zu plotten. Wenn Sie jedoch in die Karte zoomen, möchte ich, dass der .place-Kreis beim Zoomen kleiner wird.

Objekte

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

Skalierung

s = 4000; 

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

die Orte Plotten:

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

Zoom

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)+")" 
    ); 

} 

Dank all

Answer 1

In Ihrem Zoom-Funktion, legen Sie die Größe der Kreise nach dem Zoomfaktor:

.attr("r", 4/zoom.scale()); 

Etwas wie folgt aus:

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)+")" 
); 

topGroup.selectAll("circle") 
    .attr("r", 4/zoom.scale()); 

}