how to set markers in d3.js map projection

svg
    .append("g")
    .attr("class", "cluster-markers")
    .selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function (d) {
      return "translate(" + projection([d.lng, d.lat]) + ")";
    })
    .append("circle")
    .attr("r", 1);
//----------------------------------------------
 svg
      .selectAll(".mark")
      .data(data)
      .enter()
      .append("image")
      .attr("class", "mark")
      .attr("width", 20)
      .attr("height", 20)
      .attr(
        "xlink:href",
        "https://cdn2.iconfinder.com/data/icons/bitsies/128/Location-512.png"
      )
      .attr("transform", function (d) {
        return "translate(" + projection([d.lng, d.lat]) + ")";
      });

//-------------------------------------------------

svg
      .selectAll(".path")
      .data(data)
      .enter()
      .append("path")
      .attr("class", "marker")
      .attr("width", 20)
      .attr("height", 20)
      .attr("transform", function (d) {
        return "translate(" + projection([d.lng, d.lat]) + ")";
      })
      .attr("d", ICON)
      .attr("fill", "red")
      .attr("opacity", 0.4)