d3.js Force Chart online now app with different symbol shapes - charts

Question

I've built a force chart application.
http://jsfiddle.net/NYEaX/130/
I want to be able to define different shapes and maybe even change the fill backgrounds for specific user images. I'm aware of the def pattern method - is this best way to go about it. How do I create the function to control the shape of the node?
var circle = svg.append("svg:g")
.attr("class", "circle")
.selectAll("circle")
.data(force.nodes())
.enter()
.append("svg:circle")
.attr("class", function(d) {
return "level"+d.level;
})
.attr("r", function(d) {
if(d.level > 0){
return getRadius(d);
}
else{
return "0";
}
})
.style("fill", function(d) {
return color(d.group);
})

Answer 1

Here is the latest example - I've pushed the transform attributes on the exit to have the shapes fly to the left and up - keen to enhance/clean up the code - any help from anyone to make it more efficient?
**LATEST CODE -- http://jsfiddle.net/NYEaX/617/ **
var users = that.vis.selectAll("path")
.data(that.nodes);
// Enter
users
.enter().append("path")
.attr("id", function(d){
return d.id;
})
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("d", d3.svg.symbol()
.size(function(d) { return d.size; })
.type(function(d) { return d.type; }))
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", "1.5px")
.call(that.force.drag);
// Update
users
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.transition()
.duration(500);
// Exit
users.exit()
.transition()
.duration(750)
.attr("transform", function(d) { return "translate(-100,100)"; })
.remove();

Answer 2

I've modified the example to start to mimic an "online now" application. I want to represent users via the symbols and have the symbols gravitate towards the center - much like the example.
http://jsfiddle.net/NYEaX/231/
I've toggled the data and managed to update the force chart - but its snapping instead of fading in and out the symbols and there is no gravitation - on start up or on update.
this is the current plot code
//__morph plots
var plots = this.vis.selectAll("path")
.data(this.nodes)
// Enter
plots.enter()
.append("svg:path")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("d", d3.svg.symbol()
.size(function(d) { return d.size; })
.type(function(d) { return d.type; }))
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", "1.5px")
.call(this.force.drag);
// Update
plots
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.transition()
.duration(500)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
// Exit
plots.exit()
.transition()
.duration(250)
.remove();
//__morph plots