title: d3 stacked bar mouse over whole bar
body: <p>I have created a stacked bar graph using a tutorial. The stack is created with the following:</p>
  
  <pre><code>var layers = d3.layout.stack()(["passed", "failed", "skipped"].map(function(cause){
          return data.map(function(d){
              return {x: d.UP, y: +d[cause]};
              });
          }));
  </code></pre>
  
  <p>When I hover my mouse over a stack, I want the whole stack to be marked (e.g. stronger border line).</p>
  
  <p>I am currently using:</p>
  
  <pre><code>var barMouseOverFunction = function(d, i) {
      var bar = d3.select(this);
      bar.attr("stroke", "black" );
  </code></pre>
  
  <p>However this only changes for the current stack. Any ideas of how to get all the bars in the stack?</p>
  
  <p><strong>EDIT FULLCODE:</strong></p>
  
  <pre><code>d3.json('db/data.php', function(data) {             
  
  
      var layers = d3.layout.stack()(["passed", "failed", "skipped"].map(function(cause){
          return data.map(function(d){
              return {x: d.UP, y: +d[cause]};
              });
          }));
  
  
  
      var n = 3, // number of layers
          stack = d3.layout.stack(),
          yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
          yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
  
  
  
  
      var x = d3.scale.ordinal()
          .domain(data.map(function(d){return d.UP;}))
          .rangeRoundBands([0, width], .4);
  
  
      var y = d3.scale.linear()
          .domain([0, yStackMax])
          .range([height, 0]);
  
      var color = d3.scale.ordinal()
          .range(["#6ad46a", "#ed2828", "#fae650"]);
  
      var xAxis = d3.svg.axis()
          .scale(x)
          .tickSize(0)
          .tickPadding(6)
          .orient("bottom");
  
          // Grid lines
      var gridcontainer = svg.append('g');
      gridcontainer.selectAll("line").data(y.ticks(10)).enter().append("line")
          .attr("x1", 0)
          .attr("x2", width)
          .attr("y1", y)
          .attr("y2", y)
          .style("stroke", "#87cbff")
          .style("stroke-width", .3);
  
      var layer = svg.selectAll(".layer")
          .data(layers)
        .enter().append("g")
          .attr("class", "layer")
          .style("fill", function(d, i) { return color(i); })
          .style("stroke", function(d, i){return d3.rgb(color(i)).darker();});
  
      var timeformatter = d3.time.format("%b %e %Y %x%p");
  
      // On mouseover display test case information
      var barMouseOverFunction = function(d, i) {
          var bar = d3.select(this);
          bar.attr("stroke", "black" );
  
          var dataItem = data[i];
      }
  
  
      var barMouseOutFunction = function() {
          var bar = d3.select(this);
          bar.attr("stroke", function(d){
              return StatusColor(d.result);
          });
  
          d3.select("p").text("");
      }
  
  
  
  
  
      var rect = layer.selectAll("rect")
          .data(function(d) { return d; })
        .enter().append("rect")
          .attr("x", function(d) { return x(d.x); })
          .attr("y", height)
          .attr("width", x.rangeBand())
          .attr("height", 0)
          .attr("rx", 0.5)
          .attr("ry", 0.5)
          .on("mouseover", barMouseOverFunction)
          .on("mouseout", barMouseOutFunction);
  </code></pre>