title: add images to bubble layout in D3.js
body: <p>Unable to add images to bubble layout in D3.js . I am trying to append images to the circles in bubble layout but it doesnt works out . the image is not getting transformed.
  I want to have look and feel of this:- 
   <a href="http://www.cloudshapes.co.uk/labs/attention-hungry-cabinet-ministers/" rel="nofollow">http://www.cloudshapes.co.uk/labs/attention-hungry-cabinet-ministers/</a></p>
  
  <p>here is the fiddle link for what I have been trying to do:
  <a href="http://jsfiddle.net/Ankitb/eYGCY/4/" rel="nofollow">http://jsfiddle.net/Ankitb/eYGCY/4/</a></p>
  
  <pre><code>var force = d3.layout.force()
                .charge(-300)
                .size([w, h])
                .nodes(nodes)
                .on("tick", tick)
                .start();
  
      function tick() {
          svg.selectAll("circle")
              .attr("cx", function (d) { return d.x; })
              .attr("cy", function (d) { return d.y; });
      }
  
      var interval = setInterval(function () {
          var d = {
              x: w / 4 + 2 *( Math.random() - 1),
              y: h / 4 + 2 *( Math.random() - 1)
          };
          var personDot = svg.append("g")
                             .attr("class", "g-person-dots")
                             .selectAll("g")
                             .data([d])
                             .enter().append("g")
                             .attr("transform", function (d) { return "translate(" + d.x+ "," + d.y + ")"; });
          personDot.append("circle")
                    .data([d]).attr("r", 40)
                    //.attr("r", 1e-6)
          .attr("cx",0).attr("cy",0)
              .transition().style("stroke", "gray").style("fill","white")
                .ease(Math.sqrt);
  
          personDot.append("image").data([d])
               .attr("xlink:href", "PeopleProfilePicture.jpg")
           //     .attr("x", function (d, i) { return -mugDiameter / 2 - mugDiameter * (i % 9); })
           //.attr("y", function (d, i) { return -mugDiameter / 2 - mugDiameter * (i / 9 | 0); })
               .attr("width", 80)
               .attr("height", 80)
               .attr("transform", function (d) { return "translate(" + -d.x / 10 + "," + -d.y / 10 + ")"; });
  
  
          if (nodes.push(d) &gt; 10) clearInterval(interval);
          else { force.start(); }
  
      }, 30);
  </code></pre>