javascript - studio - multiples marcadores en google maps

d3 Mapa del estado de los EE. UU. con marcadores, problemas de transformación de zoom

Question

Creé un mapa d3 con los estados de EE. UU., Siguiendo este ejemplo:

http://bl.ocks.org/mbostock/4699541

y marcadores añadidos después de esta pregunta SO:

Colocar marcadores en un mapa generado con topoJSON y d3.js

El problema es que con el zoom, los marcadores de mapa permanecen en su lugar. Creo que necesito traducirlos a un nuevo puesto, pero no estoy seguro de cómo lograrlo.

var width = 900,
height = 500,
active = d3.select(null);
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select(".rebates").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", reset);
var g = svg.append("g")
.style("stroke-width", "1.5px");
d3.json("/files/d3-geo/us.json", function(error, us) {
if (error) { throw error; }
g.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path)
.attr("class", function(item) {
return window.US_STATES[item.id].water_authorities > 0 ? ''avail'' : ''unavail'';
})
.on("click", clicked);
g.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "mesh")
.attr("d", path);
});
d3.json(''/files/coordinates.json'', function(error, coords) {
if (error) { throw error; }
svg.selectAll(".mark")
.data(coords)
.enter()
.append("image")
.attr(''class'',''mark'')
.attr(''width'', 20)
.attr(''height'', 20)
.attr("xlink:href",''assets/gmap_red.png'')
.attr("transform", function(d) {
return "translate(" + projection([d[1],d[0]]) + ")";
});
});
function clicked(d) {
if (active.node() === this) { return reset(); }
if (window.US_STATES[d.id].water_authorities === 0) { return; }
active.classed("active", false);
active = d3.select(this).classed("active", true);
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
g.transition()
.duration(750)
.style("stroke-width", 1.5 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}
function reset() {
active.classed("active", false);
active = d3.select(null);
rebatesTable.clear().draw();
g.transition()
.duration(750)
.style("stroke-width", "1.5px")
.attr("transform", "");
}

Answer 1

Paso 1

Agrega todos los puntos en el grupo y no en el svg. Esto asegurará que los puntos del marcador se traduzcan con el grupo principal.

 g.selectAll(".mark")//adding mark in the group
.data(marks)
.enter()
.append("image")
.attr(''class'', ''mark'')
.attr(''width'', 20)
.attr(''height'', 20)
.attr("xlink:href", ''https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png'')
.attr("transform", function(d) {
return "translate(" + projection([d.long, d.lat]) + ")";
});

Paso 2

Niega el efecto de escala del grupo principal. de lo contrario los marcadores vendrán aumentados.

 g.selectAll(".mark")
.transition()
.duration(750)
.attr("transform", function(d) {
var t = d3.transform(d3.select(this).attr("transform")).translate;//maintain aold marker translate
return "translate(" + t[0] +","+ t[1] + ")scale("+1/scale+")";//inverse the scale of parent
}); 

Paso 3

Al alejar, la escala del marcador vuelve a ser 1.

 g.selectAll(".mark")
.attr("transform", function(d) {
var t = d3.transform(d3.select(this).attr("transform")).translate;
console.log(t)
return "translate(" + t[0] +","+ t[1] + ")scale("+1+")";
}); 

Código de trabajo aquí

¡Espero que esto ayude!