D3: La Suppression D'Éléments
J'ai un graphique à barres qui crée positifs et négatifs des bars. Je suis en train d'essayer d'enlever le négatif bars plus tard, mais pour l'instant, même après l'ajout de la des bars, si j'essaie de supprimer immédiatement le négatif bars, ils s'affichent toujours.
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()
La suppression de la déclaration est le dernier. Le reste du 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);
Vous devez vous connecter pour publier un commentaire.
essayez de faire passer votre selectAll déclaration:
Cela doit sélectionner les balises
rect
avec classenegative
bien que je ne suis pas sûr à 100% qu'il va trouver en raison de laattr
class
est écrit commebar negative
. Si cela ne fonctionne pas, je pourrais essayer de changer votreclass
attribut de quelque chose commenegative bar
ou tout simplementnegative
.Désolé si ça n'aide pas!