我明白了这一点。
图案元素的高度和宽度似乎有点像比例/百分比。因此,宽度“1”意味着它将填充其设置的整个元素。宽度“.25”表示该元素的 25%。然后,在<pattern>
您可以将图像的高度和宽度指定为它们所填充的圆的高度和宽度的实际像素值,因此在这种情况下,我的代码更改为:
var patterns = defs.selectAll("pattern")
.data(nodes.filter(function(d){ return !d.children }))
.enter()
.append('pattern')
.attr('id',function(d){
return 'id'+d.id
})
.attr('x','0')
.attr('y','0')
.attr('height','1')
.attr('width','1')
.append('image')
.attr('height',function(d){ return d.r*2})
.attr('width',function(d){ return d.r*2*1.333333})
.attr('xlink:href',function(d){
return 'img/img' + d.image;
})
然后,因为圆形包布局放大,我必须确保也更改图像的定义,所以:
function zoomTo(v) {
var k = diameter / v[2]; view = v;
defs.selectAll('image').attr('width',function(d){
return d.r*2*1.333333*k
}).attr('height',function(d){
return d.r*2*k
});
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; });
}
如果您要修改上面提到的 bl.ocks.org 示例,则需要。