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?
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.