d3.js力图

Question

我正在研究一个d3.js的力图应用程序。我很想知道如何去替换图像中心的蓝色圆圈。有一个图像网址填充圆圈的背景 - 所以有一个圆形的图片？

http://jsfiddle.net/LsMZp/1/

所以不是填充 - 将有可能只使用一个背景网址？

var circle = svg.append("svg:g").selectAll("circle").data(force.nodes()).enter().append("svg:circle").attr("r", function(d) { 
     return getRadius(d); 
    }).style("fill", function(d) { 
     return color(d.group); 
    }).call(force.drag); 

Answer 1

您可以通过定义一个模式做到：

<svg> 
    <defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"> 
    <image xlink:href="http://www.telascupece.com.br/image/chapa_perfurada.jpg" x="0" y="0" width="100" height="100" /> 
    </pattern> 
    </defs> 
</svg> 

，然后用它在你的圈子填：

var circle = svg.append("svg:g") 
    .selectAll("circle") 
    .data(force.nodes()) 
    .enter() 
    .append("svg:circle") 
    .attr("r", function(d) { 
    return getRadius(d); 
    }) 
    .style("fill", function(d) { 
    return "url(#img1)"; 
    }) 
    .call(force.drag); 

见更新例如：http://jsfiddle.net/LsMZp/2/

Answer 2

如果你不要求你像一个圆（我不能确定这是否是你想要的或没有）外被裁剪，您可以定义元素的新组：

var image = svg.selectAll(".image"); 
// Bind to data 
image = image.data(force.nodes()); 
image.enter().append("image") 
.attr("xlink:href", "<url to your image here>") 
.attr("class", "image"); 

然后在你的tick功能

function tick() { 
    link.attr("x1", function(d) {return d.source.x;}) 
     .attr("y1", function(d) {return d.source.y;}) 
     .attr("x2", function(d) {return d.target.x;}) 
     .attr("y2", function(d) {return d.target.y;}); 
    node.attr("cx", function(d) {return d.x}) 
     .attr("cy", function(d) {return d.y}); 
    image.attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 
}