使用D3或JQuery更新d3创建的屏幕

Question

I'm using d3 to create a few list items on my screen, and when I click a button I need it to run again as if the first time it ran had never happened.

setupgui: function()
{
    d3.select("#SampcoISrevenues").selectAll("li")
        .data(function () {
            if($("#radio-choice-h-2a").is(":checked"))
            {
                return sampleQ1;
            }
            else if($("#radio-choice-h-2b").is(":checked"))
            {
                return sampleQ2;
            }
            else if($("#radio-choice-h-2c").is(":checked"))
            {
                return sampleQ3;
            }
            else if($("#radio-choice-h-2d").is(":checked"))
            {
                return sampleQ4;
            }
        })
        .enter()
        .append("li")
        .attr("class", function (d){return d.textcolor;})
        .text(function (d) {
            var indentvalstring = "";
            for(var i = 0; i < d.indentval; i++)
            {
                indentvalstring += "\u00a0";
            }
            indentvalstring += d.itemname;
            return indentvalstring;
        })
        .append("span")
        .attr("class", "right")
        .text(function (d){return d.numvalue;});
}

when this is run, it loads data in from the array and depending on the button that is checked it outputs it. When I select another button for a different set of data, it does not do anything. Is there a way to remove the data onscreen and replace it with the one selected from the button?

Answer 1

D3 provides the .remove() function to remove all elements in a selection from the DOM. All you need to do is select those elements and then call the function:

d3.select("#SampcoISrevenues").selectAll("li").remove();