D3: Öğeleri Çıkarma

Question

Pozitif ve negatif çubuklar oluşturan bir çubuk grafiğim var. Negatif çubukları daha sonra kaldırmaya çalışıyorum ama şimdilik, çubukları ekledikten sonra bile, negatif çubukları hemen kaldırmaya çalışırsam, yine de görünürler.

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

Kaldırma ifadesi sonuncudur. Kodun geri kalanı: Ben çünkü bulacaksınız% 100 emin değilim ancak bu sınıfın negative ile Etiketleri rect seçmelidir

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

:

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

için selectAll deyimi geçmeyi deneyin attrclass, bar negative olarak yazılmıştır. Çalışmıyorsa, class özniteliğinizi negative bar veya sadece negative gibi bir şeye dönüştürmeyi deneyebilirim.

Eğer bu işe yaramazsa üzgünüm!