web-dev-qa-db-fra.com

D3: Suppression d'éléments

J'ai un graphique à barres qui crée des barres positives et négatives. J'essaie de supprimer les barres négatives plus tard, mais pour l'instant, même après avoir ajouté les barres, si j'essaie de supprimer immédiatement les barres négatives, elles apparaissent 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 déclaration remove est la dernière. 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);
javascriptd3.js
35
user994165

essayez de remplacer votre instruction selectAll par:

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

Cela devrait permettre de sélectionner les balises rect avec la classe negative bien que je ne sois pas sûr à 100% qu’elle le trouvera, car attrclass est écrit sous la forme bar negative. Si cela ne fonctionne pas, je vais peut-être essayer de changer votre attribut class en quelque chose comme negative bar ou simplement negative.

Désolé si cela ne vous aide pas!

93
AllenSH