Accepted answer

There are a few ways to go through this. You could easily use an enter/update/exit cycle, though this is a little complex when compared to typical use of the cycle because of the nested elements and the need to set keys to ensure smooth transitions between chart states.

In this situation, it may be easier to simply use an array to hold bars that are to be filtered out, hide those bars, update the scales to not use those keys' values, and update the remaining bars.

This requires an onclick event for each legend item. When clicked, in our clicked function we manage the array of filtered out (filtered) items like so, where d is the datum associated with the legend rectangle:

// add the clicked key if not included:
if (filtered.indexOf(d) == -1) {
  // if all bars are un-checked, reset:
  if(filtered.length == keys.length) filtered = [];
// otherwise remove it:
else {
  filtered.splice(filtered.indexOf(d), 1);

Then we can update the scales (we need the all the keys that are not in the filtered array for the domain of the x1 scale, hence the newKeys variable):

var newKeys = [];
    keys.forEach(function(d) {
      if (filtered.indexOf(d) == -1 ) {
    x1.domain(newKeys).rangeRound([0, x0.bandwidth()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { if (filtered.indexOf(key) == -1) return d[key]; }); })]).nice();

Then we can select our rectangles, filter by whether they should be hidden or shown, and update accordingly:

var bars = svg.selectAll(".bar").selectAll("rect")
  .data(function(d) { return { return {key: key, value: d[key]}; }); })

// filter out bars:
bars.filter(function(d) {
  return filtered.indexOf(d.key) > -1;
.attr("x", function(d) {
  return ("x")) + ("width"))/2;  
.attr("y", function(d) { return height; })

// update persistent bars:
bars.filter(function(d) {
    return filtered.indexOf(d.key) == -1;
  .attr("x", function(d) { return x1(d.key); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .attr("width", x1.bandwidth())
  .attr("fill", function(d) { return z(d.key); })

This solution could be made a little bit more "d3-ish" with the enter/update/exit cycle, but as our elements are relatively fixed in number, this is not as useful as in many other situations.

Here is the above code in action:

And as noted in the comments, you also need to update the axis, not just the scale. To do so, I added a class to the y scale to allow easy selection when updating the chart:".y")
        .call(d3.axisLeft(y).ticks(null, "s"))

Related Query

More Query from same tag