如何选择堆栈d3.js中的所有rects

Question

我现在正在使用d3.js并且已经建立了赌注条形图。我想知道如何创建一个on mouseover事件，它可以选择堆栈中的所有rects。

感谢任何想法。

以下是代码：

 var dataset = [
    [
      { x: 0, y: 12 },
      { x: 1, y: 43 },
      { x: 2, y: 49 },
      { x: 3, y: 67 },
      { x: 4, y: 11 }
    ],
    [
      { x: 0, y: 100 },
      { x: 1, y: 200 },
      { x: 2, y: 100 },
      { x: 3, y: 90 },
      { x: 4, y: 50 }
    ],
    [
      { x: 0, y: 90 },
      { x: 1, y: 50 },
      { x: 2, y: 69 },
      { x: 3, y: 89 },
      { x: 4, y: 77 }
    ],
     [
      { x: 0, y: 50 },
      { x: 1, y: 89 },
      { x: 2, y: 99 },
      { x: 3, y: 30 },
      { x: 4, y: 40 } 
    ],
     [
      { x: 0, y: 43 },
      { x: 1, y: 56 },
      { x: 2, y: 41 },
      { x: 3, y: 24 },
      { x: 4, y: 56 }
    ]
  ];     


var margin = { top: 30, right: 30, bottom: 40, left: 50 };

var w = 600 - margin.right - margin.left;
var h = 400 - margin.top - margin.bottom;


  //Set up stack method
  var stack = d3.layout.stack();

  //Data, stacked
  stack(dataset);

  var tooltip = d3.select("body").append("div")
    .style("position", "absolute")
    .style("padding", " 0 10px")
    .style("background", "white")
    .style("opacity", 0)

  var tempColor;

  //Set up scales
  var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset[0].length))
    .rangeRoundBands([0, w], 0.6);

  var yScale = d3.scale.linear()
    .domain([0,       
      d3.max(dataset, function(d) {
        return d3.max(d, function(d) {
          return d.y0 + d.y;
        });
      })
    ])
    .range([h, 0]);

  //Easy colors accessible via a 10-step ordinal scale
  var colors = d3.scale.category10();

    //Create SVG element
  var svg = d3.select("#chart")
        .append("svg")
        .style("background", "#E7E0CB")
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
        .attr("transform", "translate("+ margin.left + ", " + margin.top +")")

  // Add a group for each row of data
  var groups = svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .attr("transform", "translate("+ margin.left + ", " + margin.top +")")
    .style("fill", function(d, i) {
      return colors(i);
    }); 

  // Add a rect for each data value
  var rects = groups.selectAll("rect")
    .data(function(d) { return d; })
    .enter()
    .append("rect")

    //Creating events
    .on("mouseover", function(d) {
      tooltip.transition()
        .style("opacity", .9)

      tooltip.html(JSON.stringify(d))
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY) + "px")

      tempColor = this.style.fill;
        d3.select(this)
          .style("opacity", 0.5)
          .style("fill", "yellow")
          .style({stroke : "#000"})
    })

    .on("mouseout", function(d){
      d3.select(this)
        .style("opacity", 1)
        .style("fill", tempColor)
        .style({ stroke: "none" })
    });

    var yAxes = d3.svg.axis()
      .scale(yScale)
      .orient("left")
      .ticks(10);

    var yGuide = d3.select("svg").append("g")
      yAxes(yGuide)
      yGuide.attr("transform", "translate("+ margin.left +", "+ margin.top +")")
      yGuide.selectAll("path")
        .style({fill: "none " , stroke: "#000"})
        yGuide.selectAll("line")
        .style({ stroke: "#000" })


    var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
      .tickValues(xScale.domain())

  var xGuide = d3.select("svg").append("g")
      xAxis(xGuide)
      xGuide.attr("transform", "translate("+ margin.left +", "+ (h + margin.top) +")")
      xGuide.selectAll("path")
        .style({fill: "none " , stroke: "#000"})
        xGuide.selectAll("line")
        .style({ stroke: "#000" })

        rects.transition()
            .attr("x", function(d, i) {
              return   xScale(i);
            })
            .delay(function(d,i){
              return i * 20;
            })
            .attr("height", function(d) {
              return  h - yScale(d.y);
            })
            .attr("y", function(d) {
              return    yScale(d.y0 + d.y);
            })
            .attr("width", xScale.rangeBand())