D3JS: Fill circle with image

by a13xs

HTML

<body>
    <svg id="mySvg" width="80" height="80">
      <defs id="mdef">
        <pattern id="image" x="0" y="0" height="40" width="40">
          <image x="0" y="0" width="40" height="40" xlink:href="http://www.e-pint.com/epint.jpg" />
        </pattern>
      </defs>
  </svg>
</body>

JavaScript

var svg = d3.select("body").append("svg").attr("height", "450px").attr("width", "450px")

svg.append("circle")
         .attr("class", "logo")
         .attr("cx", 225)
         .attr("cy", 225)
         .attr("r", 20)
         .style("fill", "transparent")       // this code works OK
         .style("stroke", "black")     // displays small black dot
         .style("stroke-width", 0.25)
         .on("mouseover", function(){ // when I use .style("fill", "red") here, it works 
               d3.select(this)
                   .style("fill", "url(#image)");
         })
          .on("mouseout", function(){ 
               d3.select(this)
                   .style("fill", "transparent");
         });