D3.JS <tspan> вращение в солнечных лучах

Question

Я строю свою собственную диаграмму солнечных лучей из этого примера, добавляя многострочные заголовки как ,

for(i = 0; i < MAX_LINES; i++){

 var text = g.append("text")
.attr("transform", function(d) { return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")"; })
.attr('text-anchor', function (d) { return textRotation(d) > 180 ? "end" : "start"; })
.attr("dx", "0") 
.attr("dy", "0em")
.attr("class", function(d) { return setStyle(d); })
.style("fill", function(d) { return setColor(d); }) 
.style("text-anchor", "middle")
.append("tspan")
.attr("dy", function(d) { return getDY(d, i); } )
.text(function(d) { return getLine(d, i); });
//.text(function(d) { return d.name; });

}

Это работает абсолютно нормально в начальном состоянии, но когда вы увеличиваете его, нажимая на определенный раздел, все становится грязным. Скрипт перемещает только первый элемент строки и не скрывает, что другие элементы не должны отображаться на экране.

.duration(500)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
if (e.x >= d.x && e.x < (d.x + d.dx)) {

var arcText = d3.select(this.parentNode).select("text");

arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function(d) { return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")"; })
.attr('text-anchor', "middle")


}
});
}
});

Как я могу преобразовать для каждого раздела?Я попытался сделать выборку "tspan" или его стилем.

Можно ли полностью обновить блок путем переназначения имени и воссоздания "s