D3 multiple markers at the same coordinate

Question

I create a map with D3js by drawing path for the borders of my country and circle as markers. I am also using a rect and text to add a label to those circle

The problem is that on some place, I have a lot of markers near each others

In this case, some labels are not readable.

I found some other questions asked on SO : Multiple mark, How to handle Multiple Markers present at the same cooridnates,... But they are using a specific library to draw the map.

As you can see in the following code, I am only using path to draw the map manually

//Scale / translate / ...
var lineFunction = d3.svg.line()
    .x(function(d) {
        return (d.x + 5000) / 450;
    })
    .y(function(d) {
        return (-d.y + 170000) / 450;
    })
    .interpolate("linear");
var svg = d3.select(element)
    .append("svg")
    .style("width", "100%")
    .style("height", "100%")
    .attr("viewBox", "0 0 800 310");

var mainG = svg.append('g');
//Draw borders
var path = mainG.selectAll('path')
    .data($scope.bassins)
    .enter().append("path")
    .attr("d", function(d) {
        return lineFunction(d.borders);
    })

var station = mainG.append("g")
    .attr("class", "g_stations")
    .selectAll("stations")
    .data(stations)
    .enter()
    .append("g")
    .attr("class", "stations");

//Create each markers (circle)
station.append("circle")
    .attr("class", "marker")
    .attr("r", 5)
    .attr("cx", s => xCoordinate(s.coordinates.x))
    .attr("cy", s => yCoordinate(s.coordinates.y))
    .style("stroke-width", 0.5)
    .style("fill", "black")
    .style("stroke", "rgba(250,250,250,1)")
    .style("stroke-width", 0.5)

//Create the boxes for the label
station.append("rect")
    .attr("class", "stationBox")
    .attr("width", s => 5 + 4 * valuesToDisplay.toString().length)
    .attr("height", 10)
    .attr("x", s => xCoordinate(s.coordinates.x) - s.rectWidth)
    .attr("y", s => yCoordinate(s.coordinates.y) - 10)
    .attr("fill", "black")
    .style("cursor", "pointer")
    .style("stroke", "rgba(250,250,250,0.5)")
    .style("stroke-width", 0.5);

//Create the text to put inside the boxes 
station.append("text")
    .attr("class", "stationForecastLabel")
    .attr("x", s => xCoordinate(s.coordinates.x) - s.rectWidth)
    .attr("y", s => yCoordinate(s.coordinates.y) - 2)
    .attr("text-anchor", "right")
    .style("font-size", "0.7em")
    .style("fill", "white")
    .text(s => valuesToDisplay)
    .style("cursor", "pointer");

How can I make all the markers around the same place visible ?

I was thinking about letting the circle in the same place but using a line to link the label with the circle. The label won't need to be next to the circle anymore, it can be placed further. But how can it be achieved ?