title: Redrawing the stack bar chat on click on the toggle legend using D3.js
body: <p>I want to implement stack bar with toggle legend using D3.js ,on click on the legend, stack bar should get redrawn.If the legend was active,rectangle slab corresponding to the legend should get disappear and vise versa.</p>
  
  <p>On click on the legend, I am not able to update the data binded with the group element and rect element present inside the group element properly.</p>
  
  <p>In the DOM tree,on click on the legend,rect element is getting appended and added to first group element, rect element should actually get updated only.</p>
  
  <p>You can view the source code in <a href="http://jsfiddle.net/vikashkrpandey/AKt8L/16/" rel="nofollow">Jsfiddle here</a></p>
  
  <p>I want something similar to stack bar with legend selection as implemented <a href="http://nvd3.org/examples/multiBar.html" rel="nofollow">here</a> in nvd3</p>
  
  <pre><code>        function redraw() {
              var legendselector = d3.selectAll("g.rect");
              var legendData = legendselector.data();
              var columnObj = legendData.filter(function(d, i) {
                  if (d.active == true)
                      return d;
              });
  
              var remapped = columnObj.map(function(cause) {
                  return dataArch.map(function(d, i) {
                      return {
                          x : d.timeStamp,
                          y : d[cause.errorType]
                      };
                  });
              });
  
              var stacked = d3.layout.stack()(remapped);
              valgroup = stackBarGroup.selectAll("g.valgroup").data(stacked, function(d)            {
                  return d;
              }).attr("class", "valgroup");
  
              valgroup.enter().append("svg:g").attr("class", "valgroup").style("fill",                                                             
      function(d, i) {
  
                  return columnObj[i].color;
              }).style("stroke", function(d, i) {
                  return d3.rgb(columnObj[i].color).darker();
              });
  
              valgroup.exit().remove();
              rect = valgroup.selectAll("rectangle");
              // Add a rect for each date.
              rect = valgroup.selectAll("rectangle").data(function(d, i) {
                  return d;
              }).enter().append('rect');
  
  
              valgroup.exit().remove();
  
              rect.attr("x", function(d) {
                  return x(d.x);
              }).attr("y", function(d) {
                  return y(d.y0 + d.y);
              }).attr("height", function(d) {
                  return y(d.y0) - y(d.y0 + d.y);
              }).attr("width", 6);
  
          }
  </code></pre>