RaphaelJSを使用してユーザーインターフェイスを構築しています。現在.js、必要に応じてRaphaelJS2.1を使用してすべてを引き出すスクリプトがあります。ただし、描画は動的データによって駆動されるため、オブジェクトがオーバーラップする可能性が高くなります。d3.js Force Layoutをオブジェクトに追加すると、オブジェクトが自動的に分散されるため、さまざまなuxコンポーネントが重複することはありません。ただし、d3.jsForceLayoutをRaphaelで描画されたSVGオブジェクトに適用することはできませんでした。
ここでは、JSFiddleを使用して基本的な例を作成しました。d3.jsの衝突検出の例を「テンプレート」として使用しました。
私はあなたの例を修正し、結果をhttp://jsfiddle.net/gn6tZ/6/に投稿しました。- y衝突関数に（ではなく）小さなタイプミスが- rあり、強制レイアウトの実行後にノードを更新する場合は、更新関数に新しいデータを提供する必要があります。
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; });
});