score:3

Accepted answer

You have to update the position of the circles in your dragging function:

var dragging = function(d) {
    var c = projection.rotate();
    projection.rotate([c[0] + d3.event.dx / 6, c[1] - d3.event.dy / 6])
    map.selectAll('path').attr('d', path);
    map.selectAll(".circles").attr("cx", function(d) {
            var coords = projection([d.Longitude_imp, d.Latitude_imp])
            return coords[0];
        })
        .attr("cy", function(d) {
            var coords = projection([d.Longitude_imp, d.Latitude_imp])
            return coords[1];
        })
}

Also, select them using the correct class.

Regarding performance, if you don't want to calculate coords twice, you can use an each:

var dragging = function(d) {
    var c = projection.rotate();
    projection.rotate([c[0] + d3.event.dx / 6, c[1] - d3.event.dy / 6])
    map.selectAll('path').attr('d', path);
    map.selectAll(".circles").each(function(d) {
        var coords = projection([d.Longitude_imp, d.Latitude_imp])
        d3.select(this).attr("cx", function(d) {
                return coords[0];
            })
            .attr("cy", function(d) {
                return coords[1];
            })
    })
}

Here is your bl.ocks with that change: http://bl.ocks.org/anonymous/dc2d4fc810550586d40d4b1ce9088422/40c6e199a5be4e152c0bd94a13ea94eba41f004b

PS: You have a problem with the circles at the far side of the globe... however, this is another issue, already addressed here at S.O. For instance, this answer of mine: https://stackoverflow.com/a/46441983/5768908


Related Query

More Query from same tag