在D3.js

Question

无法将图像添加到泡沫布局以在D3.js图像添加到泡沫布局。我试图将图像追加到泡泡布局中的圈子，但它没有解决。图像没有变形。 我想拥有的外观和感觉的这个： - http://www.cloudshapes.co.uk/labs/attention-hungry-cabinet-ministers/

这里是小提琴链接，我一直在努力做的事情： http://jsfiddle.net/Ankitb/eYGCY/4/

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) > 10) clearInterval(interval); 
     else { force.start(); } 

    }, 30); 

Answer 1

元素的翻译是相对于它的父元素。也就是说，默认情况下，该元素将与其父元素处于相同的位置。因此，你需要做的不依赖于你传递的动态数据，但仅在图像的尺寸翻译。您需要如下设置transform。

.attr("transform", "translate(-40,-40)"); 

你也可以让你的图片透明，这样你仍然可以看到圆的背景。