相关疑难解决方法(0)

如何在地图标签上施加力排斥,以便他们自动找到合适的位置？

博斯托克"让我们制作地图"

Mike Bostock的Let's Make a Map(截图如下).默认情况下,标签放在点的坐标处,多边形/多边形的path.centroid(d)+左边或右边的简单对齐,因此它们经常进入冲突状态.

手工制作的标签展示位置

我遇到的一项改进需要添加人为IF修复,并添加所需数量,例如:

.attr("dy", function(d){ if(d.properties.name==="Berlin") {return ".9em"} })

随着要重新调整的标签数量增加,整体变得越来越脏:

//places's labels: point objects
svg.selectAll(".place-label")
    .data(topojson.object(de, de.objects.places).geometries)
  .enter().append("text")
    .attr("class", "place-label")
    .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
    .attr("dy", ".35em")
    .text(function(d) { if (d.properties.name!=="Berlin"&&d.properties.name!=="Bremen"){return d.properties.name;} })
    .attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; })
    .style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; });

//districts's labels: polygons objects.
svg.selectAll(".subunit-label") …