CODEWITHSUNDEEP
javascriptd3.jssvg
Rob
Rob

Reputation: 1216

d3 remove text from svg

I have sliders that modify the S command of a path. I want the source name to appear on the path which it does; however how do I remove the previously created text element? I have tried to remove it (see code below) but it doesn't work. The dom just fills up with extra text elements and the text on the path gets darker and darker as they start to pile up on each other. I have even tried to check for the text element by id as shown but no go. Hope you can shed any light on how to remove the text element so there is just one as each S command is modified.

I have added a fiddle here (append text at very bottom of code window): fiddle...

graph.links.forEach(function (d, i) {
        //console.log(obj[0].text, graph.links[i].source.name, graph.links[i].linkid);

        if (graph.links[i].source.name == obj[0].text) {

            var linkid = graph.links[i].linkid;
            var the_path = $("#" + linkid).attr("d");
            var arr = $("#" + linkid).attr("d").split("S");

            //update S command
            $("#" + linkid).attr("d", arr[0] + " S" + scommand_x2 + "," + scommand_y2 + " " + scommand_x + "," + scommand_y);

            svg.select("#txt_" + linkid).remove();

            svg.selectAll("#" + linkid).data(graph.links).enter()
                .append("text")
                .attr("id", "txt_" + linkid)
                .append("textPath")
                .attr("xlink:href", function (d) {
                    return "#" + linkid;
                })
                .style("font-size", fontSize + "px")
                .attr("startOffset", "50%")
                .text("")
                .text(graph.links[i].source.name);

        }
    });

Upvotes: 0

Views: 1809

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Here is a solution:

https://jsfiddle.net/kx3u23oe/

I did a couple of things. First, you don't need to bind this text to data the way you did. Second, I move the variable outside the update function, with all the append:

var someText = svg.append("text").append("textPath");

Then I kept only this inside update function:

someText.attr("xlink:href", "#L0")
            .style("font-size", "12px")
            .attr("startOffset", "50%")
            .text("some text");

Upvotes: 1

Gilsha
Gilsha

Reputation: 14591

You can remove a text element using 'remove' function. Here is a working code snippet for the same.

var text = d3.select("body")
  .append("text")
  .text("Hello...");

setTimeout(function() {
  text.remove();
}, 800);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

By the way, the problem in your code is, you are iterating over each link (graph.links.forEach(function (d, i) {) and creates a text element for all links(.data(graph.links).enter()) in each iteration. This creates n*n number of text labels; where n is the number of links. So I assume your code should be as follows.

 svg.select("#txt_" + linkid).remove();
 svg.selectAll("#" + linkid)
    .append("text")
    .attr("id", "txt_" + linkid)
    .append("textPath")
    .attr("xlink:href", function (d) {
        return "#" + linkid;
    })
    .style("font-size", fontSize + "px")
    .attr("startOffset", "50%")
    .text(graph.links[i].source.name);

Upvotes: 0

Related Questions