d3 topojson zoom на карте

Question

Я работаю над картой d3 с данными формата topojson. Я могу рисовать формы страны, а масштаб и панель прекрасно работают.

Проблема в том, что я пытаюсь построить города на карте. Я не могу понять, как управлять увеличением с помощью этих точек: размер точки должен быть одинаковым, но точки должны быть переведены правильно.

это пример, когда масштаб карты, точки перевода из карты:

var width = 724; 
var height = 768; 
var objMap = null; 

var x, y; 

//Projection 
projection = d3.geo.transverseMercator() 
    .center([2.5, -38.5]) 
    .rotate([66, 0]) 
    .scale((height * 56.5)/33) 
    .translate([(width/2), (height/2)]);  

//Path 
path = d3.geo.path() 
    .projection(projection); 

x = d3.scale.linear() 
    .domain([0, width]) 
    .range([0, width]); 

y = d3.scale.linear() 
    .domain([0, height]) 
    .range([height, 0]);   

svg = d3.select("#div_map").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

svg.append("rect") 
    .attr("class", "background") 
    .attr("width", width) 
    .attr("height", height);   

g = svg.append("g");   

// Zoom behavior 
var zoom = d3.behavior.zoom()    
    .scaleExtent([1,15]) 
    .on("zoom",function() {  

     g.selectAll("path.zoomable").attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")") 
     g.selectAll(".place").attr("transform", function(d) { p = projection(d.geometry.coordinates); return "translate(" + x(p[0]) + "," + y(p[1]) + ")"; });          
    } 
); 
svg.call(zoom); 

d3.json("datos/ARcompleto.json.txt", function (error, ar) { 

    objMap = ar; 

    //Draw the map 
    provs = g.append("g") 
    .attr("id", "g_provincias") 
    .selectAll("path") 
     .data(topojson.feature(ar, ar.objects.provincias).features) 
     .enter().append("path") 
     .classed("zoomable", true) 
     .attr("d", path)    

    g.append("g") 
     .attr("id", "g_localidades")         
     .selectAll("path")                
     .data(topojson.feature(objMap, objMap.objects.localidades).features.filter(function (d) { return d.properties.LPROVINCIA == 'MENDOZA'; })) 
      .enter().append("path") 
      .attr("d", path)          
      .attr("class", "localidad") 
      .classed("place", true) 
      //.attr("transform", function(d) {return "translate(" + projection(d.geometry.coordinates.reverse()) + ")"; }); 

}); 

Answer 1

Я могу управлять им с помощью Ларса. это новая функция масштабирования:

var zoom = d3.behavior.zoom() 
    .translate(projection.translate()) 
    .scaleExtent([height, Infinity]) 
    .scale(projection.scale()) 
    .on("zoom", function() { 
     projection.translate(d3.event.translate).scale(d3.event.scale) 
     g.selectAll("path.zoomable").attr("d", path); 

     projection.translate(d3.event.translate).scale(d3.event.scale) 
     svg.selectAll(".place").attr("d", path);  

}); 

Большое спасибо!