Les données ne sont pas re-dessinées après avoir été filtrées sur le graphique à barres d3

Question

J'ai essayé d'ajouter un filtre à un graphique à barres. La barre est supprimée lorsque je clique sur la légende, mais lorsque j'essaie de la réactiver, la barre n'est pas redessinée.

Voici un plnk;

http://plnkr.co/edit/GZtErHGdq8GbM2ZawQSD?p=preview

Je n'arrive pas à résoudre le problème - si quelqu'un pouvait donner un coup de main?

Merci

---

Code JS;

// charger les données
d3.json("data.json", function(error, data) {
  var group = [];

  function updateData() {
    group = [];

    var organization = data.organizations.indexOf("Org1");
    var dateS = $("#selectMonth").text()

    for (var country = 0; country < data.countries.length; country++) {

      var date = data.dates.indexOf(dateS);
      group.push({
        question: data.organizations[organization],
        label: data.countries[country],
        value: data.values[organization][country][date]

      });

    }
  }

  function draw(create) {

    updateData();

    x.domain(group.map(function(d) {
      return d.label;
    }));
    y.domain([0, 100]);

    // ajouter un axe

    // Ajouter le graphique à barres
    var bar = svg.selectAll("rect")
      .data(group);
    if (create) {
      bar
        .enter().append("rect")
        .attr('x', function(d) {
          return x(d.label);
        })
        .attr('y', function(d) {
          return y(d.value);
        })
        .attr('width', x.rangeBand())
        .attr('height', function(d) {
          return height - y(d.value);
        });

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", "-.55em")
        .attr("transform", "rotate(-90)");

      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 5)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Valeur");
    }

    bar
      .transition()
      .duration(750)
      .attr("y", function(d) {
        return y(d.value);
      })
      .attr("height", function(d) {
        return height - y(d.value);
      });

    // Code existant pour dessiner l'axe des y :
    var legendGroups = d3.select("#legend")
      .selectAll(".legendGroup")
      .data(group, function(d) {
        return d.label; // essayez toujours d'utiliser une fonction de clé pour identifier de manière unique
      });

    var enterGroups = legendGroups
      .enter()
      .append("g")
      .attr("class", "legendGroup");

    legendGroups
      .exit()
      .remove();

    legendGroups
      .attr("transform", function(d, i) {
        return "translate(10," + (10 + i * 15) + ")"; // positionne tout le groupe
      });

    enterGroups.append("text")
      .text(function(d) {
        return d.label;
      })
      .attr("x", 15)
      .attr("y", 10);

    enterGroups
      .append("rect")
      .attr("width", 10)
      .attr("height", 10)
      .attr("fill", function(d) {
        return "#bfe9bc";
      })
      .attr("class", function(d, i) {
        return "legendcheckbox " + d.label.replace(/\s|\(|\)|\'|\,|\.+/g, '')
      })

    .on("click", function(d) {
      d.active = !d.active;
      d3.select(this).attr("fill", function(d) {
        if (d3.select(this).attr("fill") == "#cccccc") {
          return "#bfe9bc";
        } else {
          return "#cccccc";
        }
      })
      var result = group.filter(function(d) {
        return $("." + d.label.replace(/\s|\(|\)|\'|\,+/g, '')).attr("fill") != "#cccccc"
      })

      x.domain(result.map(function(d) {
        return d.label;
      }));

      bar
        .select(".x.axis")
        .transition()
        .call(xAxis);

      bar
        .data(result, function(d) {
          return d.label.replace(/\s|\(|\)|\'|\,|\.+/g, '')
        })
        .enter()
        .append("rect")
        .attr("class", "bar")

      bar
        .transition()
        .attr("x", function(d) {
          return x(d.label);
        })
        .attr("width", x.rangeBand())
        .attr("y", function(d) {
          return y(d.value);
        })
        .attr("height", function(d) {
          return height - y(d.value);
        });

      bar
        .data(result, function(d) {
          return d.label.replace(/\s|\(|\)|\'|\,|\.+/g, '')
        })
        .exit()
        .remove()
    });

  }

Answer 1

La barre disparaît parce que vous l'avez complètement supprimée avec

.remove()

Ce que vous pouvez faire, c'est masquer l'élément lorsqu'il n'est pas sélectionné comme ceci :

d3.selectAll('.graph').selectAll("rect").attr("visibility", function(e) {
    return e.active ? "hidden" : "";
})

Voir http://plnkr.co/edit/2UWaZOsffkw1vkdIJuSA?p=preview