title: d3.js highlighting stacked bar and getting selected values
body: <p><strong>First Question</strong>:</p>
  
  <p>For single bar chart, when we "mouseover" a bar, we will get the value of the bar we selected as <code>i</code>. For example, the following code detects which element of the x-axis we chose and assign that to a variable called <code>selectedYear</code>: </p>
  
  <pre><code>.on("mouseover", function (d, i) {
      selectedYear = i;
      update();
      barChart.selectAll("text")
              .attr("fill", "black");
      d3.select(this).attr("fill", "orange");
  })
  </code></pre>
  
  <p>However, when it is the stacked bar below, how can I give "2006" to <code>selectedYear</code> and "SmartPhone" to <code>seletedCategory</code> within mouseover function? <a href="https://i.stack.imgur.com/10PBV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/10PBV.png" alt="enter image description here"></a></p>
  
  <p><strong>Second Question:</strong></p>
  
  <p>How can I highlight corresponding text on the x-axis when I mouseover a bar?
  In the picture above, how can I make the text "2006" highlighted when any blocks of the 2006 bar are being mouseovered?</p>
  
  <p><strong>And below is my entire code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script src="d3.min.js" charset="UTF-8"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  
      var width  = 700;
      var height = 500;
      var dataSet;
      var svg = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height", height);
  
  
  
  
      var dataSet1 = [
          { name: "PC" ,
              sales: [    { year:2005, profit: 3000 },
                  { year:2006, profit: 1300 },
                  { year:2007, profit: 3700 },
                  { year:2008, profit: 4900 },
                  { year:2009, profit: 700 }] },
          { name: "SmartPhone" ,
              sales: [    { year:2005, profit: 2000 },
                  { year:2006, profit: 4000 },
                  { year:2007, profit: 1810 },
                  { year:2008, profit: 6540 },
                  { year:2009, profit: 2820 }] },
          { name: "Software" ,
              sales: [    { year:2005, profit: 1100 },
                  { year:2006, profit: 1700 },
                  { year:2007, profit: 1680 },
                  { year:2008, profit: 4000 },
                  { year:2009, profit: 4900 }] }
      ];
  
  
  
  
      var stack = d3.layout.stack()
              .values(function(d){ return d.sales; })
              .x(function(d){ return d.year; })
              .y(function(d){ return d.profit; });
      var data = stack(dataSet1);
  
  
  
  
      var padding = { left:50, right:100, top:30, bottom:30 };
  
  
      var xRangeWidth = width - padding.left - padding.right;
  
      var xScale = d3.scale.ordinal()
              .domain(data[0].sales.map(function(d){ return d.year; }))
              .rangeBands([0, xRangeWidth],0.3);
  
      var maxProfit = d3.max(data[data.length-1].sales, function(d){
          return d.y0 + d.y;
      });
  
  
      var yRangeWidth = height - padding.top - padding.bottom;
  
      var yScale = d3.scale.linear()
              .domain([0, maxProfit])     
              .range([0, yRangeWidth]);   
  
  
  
      var color = d3.scale.category10();
  
      var groups = svg.selectAll("g")
              .data(data)
              .enter()
              .append("g")
              .style("fill",function(d,i){ return color(i); });
  
  
      var rects = groups.selectAll("rect")
              .data(function(d){ return d.sales; })
              .enter()
              .append("rect")
              .attr("x",function(d){ return xScale(d.year); })
              .attr("y",function(d){ return yRangeWidth - yScale( d.y0 + d.y ); })
              .attr("width",60)
              .attr("height",function(d){ return yScale(d.y); })
              .attr("transform","translate(" + padding.left + "," + padding.top + ")")
              .attr("stroke","white")
              .on("mouseover", function (d, i) {
                   groups.selectAll("rect")
                      .attr("stroke","white")
                  d3.select(this)
                          .attr("stroke", "black")
                          .attr("stroke-width", 3);
                  selectedYear = i;
              })
              .on("mouseout", function (d) {
  //                d3.select(this).attr("stroke", "white").attr("stroke-width", 0);
              });
  
  
  
  
      var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");
  
      yScale.range([yRangeWidth, 0]);
  
      var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left");
  
      svg.append("g")
              .attr("class","axis")
              .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) +  ")")
              .call(xAxis);
  
      svg.append("g")
              .attr("class","axis")
              .attr("transform","translate(" + padding.left + "," + (height - padding.bottom - yRangeWidth) +  ")")
              .call(yAxis);
  
  
      var labHeight = 50;
      var labRadius = 10;
  
      var labelCircle = groups.append("circle")
              .attr("cx",width - padding.right*0.98)
              .attr("cy",function(d,i){ return padding.top * 2 + labHeight * i; })
              .attr("r",labRadius);
  
      var labelText = groups.append("text")
              .attr("x",width - padding.right*0.8)
              .attr("y",function(d,i){ return padding.top * 2 + labHeight * i; })
              .attr("dy",labRadius/2)
              .text(function(d){ return d.name; });
  
  
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>