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 + ")"; 
    }); 
}