I can change the value of the text with a smooth little tween, but every time I am emptying one svg and creating a new one. This eventually loads the DOM up with empty SVGs. How can I get rid of them?

D3:

var vis = d3.select("#visualisation"),
        masFormatter = '$' + d3.format(",.0f"),
        numVis = d3.select("#defecit"),
        defTotal = d3.select("#defense");


    function init () {
            //Initialize mean text
            numVis.append("text")
                .attr("id", "meantext")
                .attr("y", 40)
                .attr("x", 118)
                .style("font-size", "26px")
                .style("font-family","Arial, Helvetica, sans-serif")
                .style('font-weight', 'bold')
                .style('text-color', '#525252');

            defTotal.append("text")
                .attr("id", "defense")
                .attr("y", 0)
                .attr("x", 0)
                .style("font-size", "16px")
                .style("font-family","Arial, Helvetica, sans-serif")
                .style('font-weight', 'bold')
                .style('text-color', '#525252');

            d3.select("#meantext")
            .transition()
            .duration(500)
            .ease('linear')
            .tween("text", function() {
                var i = d3.interpolate(this.textContent, dollars.value);
                return function(t) {
                  this.textContent = '$' + d3.format(",")(Math.round(i(t)));
                };
              })

//Doing something like this didn't work - kept giving me an error that the object array had no exit function
d3.select("meantext").exit().remove()



    }

I can change the value of the text with a smooth little tween, but every time I am emptying one svg and creating a new one. This eventually loads the DOM up with empty SVGs. How can I get rid of them?

D3:

var vis = d3.select("#visualisation"),
        masFormatter = '$' + d3.format(",.0f"),
        numVis = d3.select("#defecit"),
        defTotal = d3.select("#defense");


    function init () {
            //Initialize mean text
            numVis.append("text")
                .attr("id", "meantext")
                .attr("y", 40)
                .attr("x", 118)
                .style("font-size", "26px")
                .style("font-family","Arial, Helvetica, sans-serif")
                .style('font-weight', 'bold')
                .style('text-color', '#525252');

            defTotal.append("text")
                .attr("id", "defense")
                .attr("y", 0)
                .attr("x", 0)
                .style("font-size", "16px")
                .style("font-family","Arial, Helvetica, sans-serif")
                .style('font-weight', 'bold')
                .style('text-color', '#525252');

            d3.select("#meantext")
            .transition()
            .duration(500)
            .ease('linear')
            .tween("text", function() {
                var i = d3.interpolate(this.textContent, dollars.value);
                return function(t) {
                  this.textContent = '$' + d3.format(",")(Math.round(i(t)));
                };
              })

//Doing something like this didn't work - kept giving me an error that the object array had no exit function
d3.select("meantext").exit().remove()



    }

• javascript
• svg
• d3.js

Share Improve this question Follow edited Mar 5, 2014 at 15:29 JonnyD asked Dec 9, 2013 at 17:50 JonnyDJonnyD 49722 gold badges77 silver badges1919 bronze badges 6

• 1 You want d3.select("#meantext").remove(). – Lars Kotthoff Commented Dec 9, 2013 at 18:07
• @LarsKotthoff I tried that. It still doesn't pull the empty svg off the DOM. – JonnyD Commented Dec 9, 2013 at 18:13
• Where do you append the SVG? – Lars Kotthoff Commented Dec 9, 2013 at 18:18
• To an svg with the id of "defecit". Then I append the svg with a text element with an id of meantext. It every time the init function runs (when soemone presses a button) A new text element appears in the DOM. – JonnyD Commented Dec 9, 2013 at 18:23
• I'm confused now. Do you want to remove the text element or the SVG? In any caase, what you need to do is d3.select("#idOfElement").remove(). – Lars Kotthoff Commented Dec 9, 2013 at 18:33

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 2

You can remove a specific element, do d3.select("#idOfElement").remove(). There's no need for .exit() here as no data is being matched and bound.