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

Question

I've enhanced a force diagram to compare two profiles. I am trying to have the main node take on an image

http://jsfiddle.net/LsMZp/5/

• how do I get the image to be centrally aligned (sized correctly) and the thumbnail data passed in more dynamically from the json string.
• also if someone shares a particular interest - is there a better way of handling it - if the information is duplicated a link is formed but a nomad node remains left and unlinked.
• also is there a way to provide a stir of motion in the application, so it doesn't ever completely settle

https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSTzjaQlkAJswpiRZByvgsb3CVrfNNLLwjFHMrkZ_bzdPOWdxDE2Q - this is the image I'm using as a mock.

    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) {
                    if(d.group == "User"){
                         return "url(#img1)"; 
                    }else{
                        return color(d.group);
                    }
                }).call(force.drag);

                if (options.nodeLabel) {
                    circle.append("title").text(function(d) {
                        return d[options.nodeLabel];
                    });
                }

                if (options.linkName) {
                    path.append("title").text(function(d) {
                        return d[options.linkName];
                    });
                }

Answer 1

I've enhanced the system to take an array of user information. This is then used to build the nodes.

*Latest Code http://jsfiddle.net/LsMZp/49/ *

http://jsfiddle.net/LsMZp/26/

the remaining issues here.

• the need to remove nomad nodes - if user's share the same interest - they link as expected - but this leads an additional node - is there a way to clear this up during node construction - or should duplicate nodeId's be removed before rendering?
• the user images appear to be split in quadrants as if they are not centred properly, not sure why here is the code

x and y are set to 0.

 $.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);

    });

Answer 2

I've added this to the code to change the gravity property every 1/2 second. I can see its encouraging some movement - but is it really due to invoking force.start?

http://jsfiddle.net/LsMZp/7/

     var myVar=setInterval(function(){changeGravity()},500);

    function changeGravity()
    {
            var min = -100;
            var max = 1000;
            // and the formula is:
            var random = Math.floor(Math.random() * (max - min + 1)) + min;
                force.gravity = random;
                force.start();
    }