Question

I am building a user interface using Raphael JS. currently I have a .js script that draws out everything using Raphael JS 2.1 exactly as needed. However, because the drawing is driven by dynamic data it is highly likely that objects will overlap. Adding the d3.js Force Layout to the objects would cause them to scatter automatically so there is no overlap of various ux components. However I have not been able to apply the d3.js Force Layout to Raphael drawn SVG objects.

I’ve created a basic example using JSFiddle here. I used the d3.js collision detection example as a “template”.

Answer 1

I’ve fixed up your example and posted the result at http://jsfiddle.net/gn6tZ/6/. You had a minor typo in your collide function (- y instead of - r) and when you want to update the nodes after the force layout runs you need to supply the update function with the new data.

var nodes = circleHolder.nodes();

force.on("tick", function(e){
  var q = d3.geom.quadtree( nodes ),
      i = 0,
      n = nodes.length;

  while( ++i < n ) {
    q.visit(collide( nodes[i]));
  }

  d3.selectAll('circle')
       .data(nodes)
       .attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; });

});