javascript - D3js Geo unzoom element when zoom map -

i have d3js map built topojson.js.

var projection = d3.geo.mercator(); 

everything works fine, looking effect cannot manage achieve. when, zooming map pins on scale down, if scale down, need recalculate coordinates , can't find formula so.

zoom handler

scale = d3.event.scale; if (scale >= 1) {     main.attr("transform", "translate(" + d3.event.translate + ")    scale(" + d3.event.scale + ")"); }     else {    main.attr("transform", "translate(" + d3.event.translate + ")scale(1)"); }  //43x49 size initial pine size when scale = 1  var pins = main.select("#pins").selectall("g").select("image")             .attr("width", function () {                 return 43 - (43 * (scale - 1));             })             .attr("height", function () {                 return 49 - (49 * (scale - 1));             })             .attr("x", function () {                 //calculate new image coordinates;             })             .attr("y", function () {                 //calculate new image coordinates;             }); 

my question : how calculate x , y based on new scale?

i hope clear enough.

thanks help

edit :

calculation of initial pins coordinates :

"translate(" + (projection([d.lon, d.lat])[0] - 20) + ","  + (projection([d.lon, d.lat])[1] - 45) + ")" 

-20 , -45 have tip of pin right on target.

you need "counter-scale" pins, i.e. main scales up/down need scale pins down/up, in opposite direction. counter-scale factor 1/scale, , should apply each of <g>s containing pin image. lets remove current width , height calculation <image> nodes (since parent <g>'s scale take care of it).

however, work properly, you'll need remove x , y attributes <image> , apply position via counter-scaled parent <g> well. necessary because if there's local offset (which case when x , y set on <image>) local offset gets scaled parent <g> scaled, makes pin move incorrect location.

so:

var pincontainers = main.select("#pins").selectall("g")     .attr("transform", function(d) {         var x = ... // don't know how calculate x (since didn't show it)         var y = ... // don't know how calculate y         var unscale = 1/scale;         return "translate(" + x + " " + y + ") scale(" + unscale + ")";     }) pincontainers.select("image")     .attr("width", 43)     .attr("height", 49)     // can use non-zero x , y image scale     // relative point other top-left of     // image (such tip of pin)     .attr("x", 0)     .attr("y", 0)