D3在同一坐标处的多个标记

Question

我使用path为我的国家/地区的边框和circle作为标记创建了一个包含D3js的地图。我还使用rect和text为circle

添加标签

问题在于，在某些地方，我有很多标记靠近彼此

在这种情况下，某些标签不可读。

我在SO上发现了一些其他问题：Multiple mark，How to handle Multiple Markers present at the same cooridnates，......但他们正在使用特定的库来绘制地图。

正如您在以下代码中所看到的，我只使用path手动绘制地图

//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");

如何在同一个地方看到所有标记？

我在考虑让圆圈在同一个地方，但是用一条线将标签与圆圈联系起来。标签不再需要在圆圈旁边，它可以放得更远。但是如何实现呢？