How to Avoid Image overlapping using d3 | Javascript

I have this code that shows an number in image format in the map , but as you can see red number 2 and 8 are overlapping , what can i do for that not to happen.
is there any easy way to avoid that ? like using css or can only be done with d3.

that’s the image that illustrate the overlapping problem.

thats the code i use :
Thanks for the help !

<script>

var php_varRed = '<?php echo json_encode($redSide) ?>';
var php_varBlue = '<?php echo json_encode($blueSide) ?>';
const positionMapBlueSide = JSON.parse(php_varBlue);
const positionMapRedSide = JSON.parse(php_varRed);

for (var cont=0; cont<positionMapBlueSide.length;cont++) {

var cords = [
                  [positionMapBlueSide[cont][1]['x'] ,positionMapBlueSide[cont][1]['y']],
                  [positionMapBlueSide[cont][2]['x'] ,positionMapBlueSide[cont][2]['y']],  

                  [positionMapRedSide[cont][1]['x'] ,positionMapRedSide[cont][1]['y']],
                  [positionMapRedSide[cont][2]['x'] ,positionMapRedSide[cont][2]['y']],

//only posting  the first two coordinates here  , but it goes until 10.
             
              ],

    domain = {
            min: {x: -120, y: -120},
            max: {x: 14870, y: 14980}
    },
    width = 325,
    height = 325,
    bg = "./assets/imgs/mapa2.gif",
    xScale, yScale, svg;

color = d3.scale.linear()
    .domain([0, 3])
    .range(["white", "steelblue"])
    .interpolate(d3.interpolateLab);

xScale = d3.scale.linear()
  .domain([domain.min.x, domain.max.x])
  .range([0, width]);

yScale = d3.scale.linear()
  .domain([domain.min.y, domain.max.y])
  .range([height, 0]);

svg = d3.select("#map"+cont).append("svg:svg")
    .attr("width", width)
    .attr("height", height);

svg.append('image')
    .attr('xlink:href', bg)
    .attr('x', '0')
    .attr('y', '0')
    .attr('width', width)
    .attr('height', height);
   
    svg.append('svg:g').selectAll("circle")
    .data(cords)
    .enter().append("svg:circle")
   
    

        .attr('cx', function(d) { return xScale(d[0]) })
        .attr('cy', function(d) { return yScale(d[1]) })
        .attr('fill',function (a) { 
            
     
        switch(a[0]){
          case(positionMapBlueSide[cont][1]['x']): return "url(#image1Blue)"; break; 
          case(positionMapBlueSide[cont][2]['x']): return "url(#image2Blue)"; break;

        
          case(positionMapRedSide[cont][1]['x']): return "url(#image1Red)"; break; 
          case(positionMapRedSide[cont][2]['x']): return "url(#image2Red)"; break;

        
        //only posting  the first two coordinates here  , but it goes until 10.


        }  
        })  

        .attr('r', 16)
    
}

    </script>