d3 US-Staatskarte mit Markierungen, Zoomen und Transformationsproblemen

Ich habe eine d3-Karte mit US-Bundesstaaten erstellt, wie im folgenden Beispiel dargestellt:

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

und fügte Markierungen hinzu, die dieser SO-Frage folgen:

Stellen Sie Markierungen auf eine Karte, die mit topoJSON und d3.js @ erstellt wurd

Das Problem ist, dass beim Zoomen die Kartenmarkierungen an Ort und Stelle bleiben. Ich glaube, ich muss sie in eine neue Position übersetzen, bin mir aber nicht sicher, wie ich das erreichen kann.

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