Data not being redrawn after being filtered on d3 bar chart

Question

I've been trying to add a filter to a bar chart. The bar is removed when I click on the legend, but when I try to reactivate the bar is not being redrawn.

Here is a plnk;

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

I can't seem to work out the issue - if anyone could lend a hand?

Thanks

---

JS code;

// load the data
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]);

    // add axis




    // Add bar chart
    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("Value");
    }



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


    // Existing code to draw y-axis:
    var legendGroups = d3.select("#legend")
      .selectAll(".legendGroup")
      .data(group, function(d) {
        return d.label; // always try and use a key function to uniquely identify
      });

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

    legendGroups
      .exit()
      .remove();

    legendGroups
      .attr("transform", function(d, i) {
        return "translate(10," + (10 + i * 15) + ")"; // position the whole group
      });

    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

The bar disappear because you totally remove it with

            .remove()

What you can do is hide the element when not selected like that :

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

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