This example tries to improve the previous one by introducing a way to show more labels as the zoom level increases. The "algorithm" is a poor man's level of detail computation that uses empirically found magic numbers with an inverse square root law. It probably would not work reasonably in other cases.
Also, a minor bug is solved: Apparently, vector-effect: non-scaling-stroke
does not work with <use>
, so the world's outline was not scale independent. This is solved by creating two different paths without relying on <use>
.
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-selection-multi.v0.4.min.js
https://d3js.org/d3-geo-projection.v2.min.js
https://d3js.org/topojson.v2.min.js