D3: Removing Elements

Question

I have a bar chart that creates positive and negative bars. I'm trying to remove the negative bars later on but for now, even after appending the bars, if I try to immediately remove the negative bars, they still appear.

var margin = {top: 30, right: 10, bottom: 10, left: 10},     width = 750 - margin.left - margin.right,     height = data.length * 20 //500 - margin.top - margin.bottom;  var x = d3.scale.linear()     .range([0, width*.85])  //chart1.x =x //chart1.y = y  var y = d3.scale.ordinal()     .rangeRoundBands([0, height], 0);  var xAxis = d3.svg.axis()     .scale(x)     .orient("top");  var svg = d3.select("#barchart").append("svg")     .attr("width", width + margin.left + margin.right)     .attr("height", height + margin.top + margin.bottom)   .append("g")     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  //d3.tsv("data.tsv", type, function(error, data) {   x.domain(d3.extent(data, function(d) { return +d.netdonations_over_population_to_gdppercap_percentage; })).nice();   y.domain(data.map(function(d) { return d.name; }));    bar = svg.selectAll(".bar")       .data(data)     .enter().append("rect")       .attr("class", function(d) { return +d.netdonations_over_population_to_gdppercap_percentage < 0 ? "bar negative" : "bar positive"; })       .attr("x", function(d) { return x(Math.min(0, +d.netdonations_over_population_to_gdppercap_percentage)); })       .attr("y", function(d) { return y(d.name); })       .attr("width", function(d) { return Math.abs(x(+d.netdonations_over_population_to_gdppercap_percentage) - x(0)); })       .attr("height", y.rangeBand()).style("stroke","white")  bar.selectAll(".negative").data([]).exit().remove() 

The remove statement is the last one. The rest of the code:

svg.selectAll("text")     .data(data)   .enter().append("text").text(function(d) {         return d;    }).attr("y", function(d, i) {         return y(d.name)+ y.rangeBand();         //return i * (height / data.length)+30;    }).attr("x", function(d) {          return x(0) //x(Math.min(0, +d.netdonations_over_population_to_gdppercap_percentage));    }).text(function(d) {         //return y(d) + y.rangeBand() / 2;         return d.name + " " + d.netdonations_over_population_to_gdppercap_percentage;         }).style("font-size","14px").attr("dx", 3).attr("dy", "-0.45em")     svg.append("g")       .attr("class", "x axis")       .call(xAxis);    svg.append("g")       .attr("class", "y axis")     .append("line")       .attr("x1", x(0))       .attr("x2", x(0))       .attr("y2", height); 

Answer 1

try switching your selectAll statement to:

svg.selectAll("rect.negative").remove() 

This should select the tags rect with class negativealthough I'm not 100% sure it will find it because the attr class is written as bar negative. If it doesn't work I might try changing your class attribute to something like negative bar or just negative.

Sorry if this doesn't help!