title: d3.js svg image: scale from center of rectangle
body: <p>I'm using d3 to populate a cartesian plane with a bunch of <code>svg:image</code> elements spread out over different coordinates.</p>
  
  <p>I'd like to add <code>mouserover</code> and <code>mouseout</code> logic that zooms the image the mouse is over in and lightens the opacity of the others.  I'm filtering my selection on mouseover to only select the desired element and everything is working great, except my scaling logic doesn't seem to get the desired effect.  The images expand downward and to the right rather than in the outward from the diagonal center.</p>
  
  <p>Here's what I've tried:</p>
  
  <ol>
  <li><code>transform: scale(1.5)</code> Which expands, but also totally shifts the image's position</li>
  <li><code>transform: translate(-(width/2), -(height/2))</code> combined with scale, which does the same but from a different starting position</li>
  <li>Changing the x and y coords to ones adjusted for half widths and heights, which has the same effect.</li>
  </ol>
  
  <p>Is there no <code>text-anchor</code> equivalent for image elements with which I could set an "anchor point" to scale from?  I'm not sure what the html svg parlance is, but I guess I'm thinking of something similar to the anchor points a lot of vector editors have.</p>
  
  <p>Current approach, mouseover handler:</p>
  
  <pre><code>  function fade(dir){
      return function(d){
        var others = svg.selectAll("image.movie_cover")
          .filter(function(g,i){
            return g != d
          })
          .transition().duration(800)
          .style("opacity",.3);
  
        var single = svg.selectAll("image.movie_cover")
          .filter(function(g,i){
            return g === d;
          })
          .transition().duration(900)
          .attr("transform", "translate(-40,-40) scale(1.4)")
  
          var title = keys[coords.indexOf(d)];
          var url = "/static/eshk/"+hash+"_images/" + title  + ".jpg";
  
          tt.transition()        
                  .duration(200)      
                  .style("opacity", .9);      
          tt.html(title)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px"); 
      }
   }
  </code></pre>
  
  <p>Using this method, the images move inconsistent distances despite all being the same size.</p>