如何在d3.js中增加圆宽和图像宽度？

Question

我有三个圆圈，每个圆圈都有一个图像。单击按钮时，随机圆圈变大。问题是图像无法正常工作。我想让图片成为圆圈的100％：

我无法使图像与圆圈大小相同。 以下是创建defs，pattern，image和circle的代码：

group.append("g")
    .attr('id', 'a' + d.uuid)
    .append('defs')
    .append("svg:pattern")
    .attr("id", 'img'+ d.uuid)
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", d.img)
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("x", 0)
    .attr("y", 0)


    d3.select('#a' + d.uuid).append('circle')
    .attr("cx", (config.avatar_size/2) + i * 48)
    .attr("cy", config.avatar_size/2)
    .attr("r", config.avatar_size/2)
    .style("fill", "#fff")
    .style("fill", "url(#img" + d.uuid + ")")
    .attr('stroke', 'black')
    .attr("stroke-width", "2");

这是onclick事件：

function getRandom(max)
{
   var s = d3.select('#a'+max).attr('cx');
   console.log("cx is: " + s);
   d3.select('#a'+max)
       .transition()
       .duration(1000)
       .attr('transform', 'translate(' + (-s + 150) + ', 150)')
       .select('circle')
       .attr('r', (config.avatar_size + 20)/2)

d3.select('#img' + max)
    .attr('width', config.avatar_size + 20)
    .attr('height', config.avatar_size + 20)
    .attr("x", 0)
    .attr("y", 0);

d3.select('#img'+ max + ' image')
    .attr('width', config.avatar_size + 20)
    .attr('height', config.avatar_size + 20)
}

结果如下：