D3: Entfernen von Elementen

Question

Ich habe ein Balkendiagramm, das positive und negative Balken erstellt. Ich versuche, die negativen Balken später zu entfernen, aber jetzt, selbst nachdem ich die Balken angehängt habe, wenn ich versuche, die negativen Balken sofort zu entfernen, erscheinen sie immer noch.

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

Die Anweisung remove ist die letzte. Der Rest des Codes:

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

bereite selectAll Anweisung Umschalten auf:

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

Dies sollte die Tags rect mit Klasse wählen negative obwohl ich nicht 100% sicher bin, wird es es finden, weil die attrclass wird als bar negative geschrieben. Wenn es nicht funktioniert, könnte ich versuchen, Ihr class Attribut zu etwas wie negative bar oder nur negative zu ändern.

Sorry, wenn das nicht hilft!