Put a circle in a real coordinate in d3.js

I’m trying to put a circle in a given coordinate. But when I zoom, the circle moves.

How can I avoid this and always keep its position?

Here is part of the code:

var svg = d3.select("#map").select("svg"),
    g = svg.append("g");
var coordenadas = map.latLngToLayerPoint([2.4574702, -76.6349536])


for (var i = 1; i < 5; ++i) {
    var circle = svg.append("circle")
        .attr("cx", coordenadas.x)
        .attr("cy", coordenadas.y)
        .attr("r", 0)
        .style("stroke-width", 5 / (i))
        .attr("class", "circulo_explosion")
        .transition()
        .delay(Math.pow(i, 2.5) * 50)
        .duration(2000)
        .ease('quad-in')
        .attr("r", 25)
        .style("stroke-opacity", 1)
        .each("end", function() {});
}

Here is a Plunker with the full code:

https://plnkr.co/edit/DPRHgUDIFGIFdZZsbqjs?p=preview