RaphaelのSVGオブジェクトに力指向アルゴリズムを追加する

Question

Raphael JSを使用してユーザーインターフェイスを構築しています。現在、私は.jsスクリプトを使用して、Raphael JS 2.1を使用してすべてを必要に応じて正確に描画します。ただし、図面は動的データによって駆動されるため、オブジェクトが重なり合う可能性が高くなります。 d3.js Force Layoutをオブジェクトに追加すると、自動的にばらつきが発生し、さまざまなuxコンポーネントが重複することはありません。しかし、私はd3.js Force LayoutをRaphaelで描かれたSVGオブジェクトに適用することができませんでした。

JSFiddle hereを使用して基本的な例を作成しました。私はd3.js collision detection exampleを「テンプレート」として使用しました。

Answer 1

を私はあなたの例を固定し、http://jsfiddle.net/gn6tZ/6/で結果を掲載しました。あなたの衝突機能（- rの代わりに- y）にマイナーなタイプミスがあり、フォースレイアウトが実行された後にノードを更新する場合は、新しいデータで更新機能を提供する必要があります。

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; }); 

}); 

Answer 2

d3

例の一つ：Force-Directed Graph