d3圆圈上的图案位移问题

Question

http://jsfiddle.net/LsMZp/37/

我遇到了这个模拟中稳定模式的问题。

如何确保图像始终居中对齐 - 它似乎会根据其位置/比例跳转。

这是此问题的代码。希望解决方案可以应用于此力图示例。

d3.js Force Chart - image/node linkage and animation

function addUserPatterns(patternsSvg, userData){

    $.each(userData, function( index, value ) {
        var defs = patternsSvg.append('svg:defs');
                    defs.append('svg:pattern')
                        .attr('id', "--"+index+"-"+value.userName.toLowerCase())
                        .attr('patternUnits', 'userSpaceOnUse')
                        .attr('width', 100)
                        .attr('height',100)
                        .append('svg:image')
                        .attr('xlink:href', value.userImage)
                        .attr('x', 0)
                        .attr('y', 0)
                        .attr('width', 100)
                        .attr('height', 100);
    });    



                var circle = patternsSvg.append("svg:g")
                    .selectAll("circle")
                        .data(userData);

                       //enter
                       circle 
                        .enter()
                        .append("svg:circle")
                        .attr("r", 50)
                        .style("fill", function(d, i) {
                            var imgUrl = "--"+i+"-"+d.userName.toLowerCase();
                            return "url(#"+imgUrl+")"; 
                        })
                       .attr("cy", function(d){
                           return  random(0, 143);
                       })
                       .attr("cx", function(d){
                           return  random(0, 143);
                       })

    function random(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }



}

var patternsSvg = d3.select("body")
                .append('svg')
                .attr('class', 'patterns')
                .attr('width', 300)
                .attr('height', 300)
                    .append('g')
                    .attr("transform","translate(100, 100)")

var userData =[
    {
        "userName": "Ria",
    "userImage" : "https://pbs.twimg.com/profile_images/427892889092231168/4c4Qwynr.png"
    },
     {
"userName": "Barry",        
"userImage" : "https://lh3.googleusercontent.com/-XdASQvEzIzE/AAAAAAAAAAI/AAAAAAAAAls/5vbx7yVLDnc/photo.jpg"
    }
]

addUserPatterns(patternsSvg, userData);

---

我现在将图像附加到圆圈上了 - 但如果图像尺寸/尺寸不同 - 有没有办法确保图像正确适合？

这只是一个假设，以确保图像的尺寸彼此相同 - 或者是否有更复杂的方法来计算图像宽度/高度，然后根据需要改变图案属性？

http://jsfiddle.net/LsMZp/48/

var defs = patternsSvg.append('svg:defs');
            defs.append('svg:pattern')
                .attr('id', "--"+index+"-"+value.userName.toLowerCase())
                //.attr('patternUnits', 'userSpaceOnUse')
                  .attr('x', 0)
                .attr('y', 0)
                .attr('width', 50)
                .attr('height', 50)
                .append('svg:image')
                .attr('xlink:href', value.userImage)
                .attr('x', 0)
                .attr('y', 0)
                .attr('width', 100)
                .attr('height', 100);

}）;