D3.JS Dynamically replace

Question

I am using sunburst example as a basis and trying to change multi-lined caption on clicking with a new data. The click function looks like this:

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: In this example the initial captions should be replaced by "TEST".

But it doesn't work and show nothing. What I am doing wrong? Thanks in advance. Any advice would be helpful.

In the same time this piece of code `.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.select("tspan") .text("TEST") } })` do replacement of the first tspan element — VVK, Dec 08 '16 at 21:22

score 0 · Answer 1 · answered Dec 08 '16 at 21:37

0

I have found solution through experiments. Instead of using replaceText.remove("tspan") you should use replaceText.selectAll("*").remove();

Bingo!

answered Dec 08 '16 at 21:37

VVK

435
2
27

D3.JS Dynamically replace

1 Answers1