title: How to make a bar bigger on mouseover in D3?
body: <p>I am trying to do the equivalent of </p>
  
  <pre><code>.somediv:hover {
      -webkit-transform:scale(1.1, 1.1);
      -moz-transform:scale(1.1, 1.1);
      -ms-transform:scale(1.1, 1.1);
      -o-transform:scale(1.1, 1.1);
      transform: scale(1.1);
  }
  
  .somediv {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  </code></pre>
  
  <p>in D3.</p>
  
  <p>I have a bar/histogram that I want to hover over and make it bigger and darker in color on mouse hover and make it go back to the original shape and size on mouseout.</p>
  
  <p>I tried to add a mouseover event to the svg element but it doesn't work. The bar just shifts right or left and some bars on the extreme corner disappear instead of becoming larger in size.</p>
  
  <pre><code>svg.selectAll("rect")
                  .data(dataset)
                  .enter()
                  .append("rect")
                  .attr("x", function(d,i) {
                      return i * (width/dataset.length);
                  })
                  .attr("y", function(d) {
                      return height-(d*myheight);
                  })
                  .attr("width", width / dataset.length - barPadding)
                  .attr("height", function(d) {
                          return d*myheight;
                   })
                   .attr("fill", function(d) {
                          return "rgb(0, 0, " + (d * 8) + ")";
                   })
  
                  .on("mouseover", function(d,i) {
                  d3.select(this)
                 .attr("transform", "scale(1.1,1.1)");
                }
  </code></pre>
  
  <p>How do I fix this?</p>