D3.JS Динамически заменить <tspan>

Question

Я использую пример солнечных лучей в качестве основы и пытаюсь изменить многослойный заголовок при клике с новыми данными. Функция щелчка выглядит так:

function click(d) {

text.transition().attr("opacity", 0);

console.log(d.depth);

path.transition()
    .duration(750)
    .attrTween("d", arcTween(d))

.each("start", function(e, i) {

    if (e.x >= d.x && e.x < (d.x + d.dx))

    {
        var replaceText = d3.select(this.parentNode).select("text")
        replaceText.remove("tspan")

        var tspan = replaceText.append("tspan")
            .attr("class", "sunburst2")
            .attr("x", 0)
            .attr("y", 0)
            .attr("text-anchor", "middle")
            .text("TEST");

    }

})

//each
.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")


    }

});
//end of each

}

PS: в этом примере начальные заголовки должны быть заменены на "ТЕСТ".

Но это не работает и ничего не показывает. Что я делаю не так? Заранее спасибо. Любые советы будут полезны.

Answer 1

Я нашел решение с помощью экспериментов. Вместо того, чтобы использовать replaceText.remove("tspan") ты должен использовать replaceText.selectAll("*").remove();

Бинго!