title: Dynamically display images in D3
body: <p>I want to display a series of images as an animation -- I'd use a GIF, except I want to manipulate specific frames. </p>
  
  <p>I've displayed the image on an SVG canvas and now I want to change <code>xlink:href</code> dynamically. </p>
  
  <pre><code>function startAnimation(){
      c += 1;
      d3.select(this)
          .transition()
          .attr("xlink:href", "images/image-" + c.toString() +".png")
          .each("end", startAnimation);       
  };
  </code></pre>
  
  <p>This approach works fine if I try to change an attribute like image height, but it doesn't seem to work with the attribute <code>xlink:href</code>.</p>
  
  <p>Is there a way to dynamically update images like this?</p>