score:14

Accepted answer

Step 1

Add all the points in the group and not in the svg. This will ensure that the marker points translate with the main group.

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

Step2

Negate the scaling effect of the main group. else the markers will come zoomed up.

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

Step3

On zoom out make the marker scale back to 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+")";
    });   

Working code here

Hope this helps!


Related Query