javascript

git

java

python

git-remote

c++

github

django

c#

reactjs

node.js

performance

branch-prediction

git-commit

git-revert

validation

email-validation

undefined

scrum

kubernetes

d3.js-D3js:自动放置标签以避免重叠? (推斥力)

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


博斯托克(Bostock)“让我们来绘制地图”

迈克·博斯托克(Mike Bostock)的《让我们做一张地图》(以下屏幕截图)。 默认情况下,标签放置在点的坐标处,而多边形/多多边形的population +简单的向左或向右对齐,因此它们经常会发生冲突。

enter image description here

手工标签放置

我遇到的一项改进要求添加一个人工制作的population修复程序,并根据需要添加尽可能多的修复程序,例如:

.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")
    .data(topojson.object(de, de.objects.subunits).geometries)
  .enter().append("text")
    .attr("class", function(d) { return "subunit-label " + d.properties.name; })
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("dy", function(d){
    //handmade IF
        if( d.properties.name==="Sachsen"||d.properties.name==="Thüringen"|| d.properties.name==="Sachsen-Anhalt"||d.properties.name==="Rheinland-Pfalz")
            {return ".9em"}
        else if(d.properties.name==="Brandenburg"||d.properties.name==="Hamburg")
            {return "1.5em"}
        else if(d.properties.name==="Berlin"||d.properties.name==="Bremen")
            {return "-1em"}else{return ".35em"}}
    )
    .text(function(d) { return d.properties.name; });

需要更好的解决方案

对于较大的地图和标签集而言,这是无法管理的。 如何在这两个类别中添加力排斥:population.subunit-label

这个问题真是令人费解,因为我没有对此进行最后期限,但对此我感到很好奇。 我正在考虑将此问题作为Migurski / Dymo.py的基本D3js实现。 Dymo.py的README.md文档设定了一系列目标,从中可以选择核心需求和功能(工作的20%,结果的80%)。

  1. 初始放置:Bostock从相对于geopoint的左/右定位开始。
  2. 标签间的排斥:可能采用不同的方法,Lars&Navarrc提出了一种,
  3. 标签an灭:当一个标签的整体排斥力太强时(由于挤压在其他标签之间),标签an灭的功能为label灭,优先级是随机的或基于population数据值,我们可以通过NaturalEarth的.shp文件获得该值。
  4. [豪华]标签到点的排斥:带有固定点和移动标签。 但这是一种奢侈。

我忽略标签排斥是否可以在标签的各个层和类别之间起作用。 但是让国家标签和城市标签不重叠也可能是一种奢侈。

trans by 2020-08-01T16:03:09Z

1 共1页