D3: Usuwanie elementów

Question

Mam wykres słupkowy, który tworzy paski dodatnie i ujemne. Próbuję później usunąć ujemne pręty, ale na razie, nawet po dodaniu prętów, jeśli spróbuję natychmiast usunąć negatywne pręty, nadal się pojawiają.

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() 

Instrukcja usuwania jest ostatnią. Reszta kodu:

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

spróbuj przełączyć swoje oświadczenie selectAll do:

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

To powinno wybrać tagi rect z klasą negative choć nie jestem w 100% pewien, że będzie go znaleźć, ponieważ attrclass jest napisane jako bar negative. Jeśli to nie zadziała, mogę spróbować zmienić atrybut class na coś takiego jak negative bar lub po prostu negative.

Przepraszam, jeśli to nie pomoże!