After enhancing a force diagram to compare two profiles, I am faced with the challenge of getting the main node to display an image.
- How can I centrally align and size the image correctly while making the thumbnail data from the JSON string more dynamic?
- Is there a better way to handle shared interests so that duplicated information forms a link instead of leaving a nomad node unlinked?
- Can motion be added to the application to prevent it from ever settling completely?
Mock image being used
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];
});
}