D3.js Слишком много текстовых элементов приводит к проблемам с производительностью

Question

Я добавляю более 300 текстовых элементов в центр моих многоугольников. На моем ПК все нормально, но на мобильном устройстве он начинает заикаться, когда я начинаю перетаскивать или увеличивать карту. Есть ли альтернатива или другой подход?

Вот мой код:

function setDescription() {
    var arrDescription = ...

        for (var key in arrDescription) {
            var customID = key;
            var strDescription = arrDescription[key];

            svgContainer.selectAll(null)
                .data(feat.features.filter(function(d) {
                    return d.properties.ID == customID;
                }))
                .enter()
                .append("g").attr("id", "txt")
                .attr("transform", function(a) {
                    var centro = path.centroid(a);
                    return "translate(" + centro[0] + "," + centro[1] + ")";
                })
                .append("text")
                .attr("text-anchor", "middle")
                .attr("font-size", function(d) {
                    var bb = path.bounds(d)
                    return ((bb[1][0] - bb[0][0]) / 5) * 0.25 + "px";
                })
                .text(strDescription)
                .attr("pointer-events", "none");
        }
}