извините что влезаю .я может что то не понимаю . но как я понимаю вы делали замеры и пробоемма именно в рендеринге ?

на сколько мне известно браузер не рендерит элемены с none . и как бы странно что здесь камень преткновения

const city = this.g
     .selectAll("g.city")
     .data(topojson.feature(cities, cities.objects.cities).features)
     .enter()
     .append("g")
     .attr("class", "city")
     .style("display", "none")
     .attr("transform", (d) => {
       if (d.geometry) {
         const lon = Number(d.geometry.coordinates[0]);
         const lat = Number(d.geometry.coordinates[1]);
         return "translate(" + this.projection([lon, lat]) + ")";
       }
     });
   city
     .append("circle")
     .attr("class", "city-point")
     .attr("r", 0.2)
     .style("fill", "orange")
     .style("display", "none");
   city
     .append("text")
     .attr("class", "city-name")
     .attr("x", 0.4)
     .attr("y", 0.15)
     .attr("fill", "#fff")
     .attr("font-size", "0.5px")
     .style("display", "none")
     .text((d) => {
       return d.properties.name;
     });

я сразу их добавляю с display:none

Возможно в чем-то еще причина, не могу так сказать сходу. Не понятно, почему шаг Rendering при скрытых точках ( .style(‘display’, ‘none’) ) занимает столько времени.

а попробуйте не стилем задать display а аттрибутом

один и тот же эффект, как только я их добавляю на карту (с none или с hidden) производительность падает

но проблема была не в этом, проблема в том что я их постоянно трансформировал при зуме

Спасибо, прочёл, попробую реализовать сегодня, пока что я скрываю текст при трансформации, это помогло ускорить отрисовку