D3: Loại bỏ các phần tử

Question

Tôi có biểu đồ thanh tạo ra các vạch âm và dương. Tôi đang cố gắng để loại bỏ các thanh tiêu cực sau này nhưng bây giờ, ngay cả sau khi phụ thêm các thanh, nếu tôi cố gắng để loại bỏ ngay lập tức các thanh tiêu cực, chúng vẫn xuất hiện.

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

Tuyên bố xóa là câu lệnh cuối cùng. Phần còn lại của các mã:

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

hãy thử chuyển tuyên bố SelectAll của bạn để:

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

này nên chọn các thẻ rect với lớp negative mặc dù tôi không chắc chắn 100% nó sẽ tìm thấy nó vì attrclass được viết là bar negative. Nếu nó không hoạt động tôi có thể thử thay đổi thuộc tính class của bạn thành một cái gì đó như negative bar hoặc chỉ negative.

Xin lỗi nếu điều này không hữu ích!