向Raphael SVG對象添加強制定向算法

我正在使用Raphael JS構建用戶界面。目前我有一個.js腳本，它根據需要使用Raphael JS 2.1繪製所有內容。但是，因爲繪圖是由動態數據驅動的，所以對象很可能會重疊。將d3.js Force Layout添加到對象會使它們自動分散，因此不會有各種ux組件重疊。然而，我還沒有能夠將d3.js Force Layout應用於Raphael繪製的SVG對象。向Raphael SVG對象添加強制定向算法

我已經使用JSFiddle here創建了一個基本示例。我使用d3.js collision detection example作爲「模板」。

來源

2012-04-04 b_dubb

我搞掂你的榜樣，併發布結果在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; }); 

});

來源

2012-05-05 21:03:42 Bill

做得好，正是我試圖實現的想法 – 2012-05-07 21:24:56

任何想法如何適應這個例子來創建一組形狀之間的強制佈局？假設一個組由矩形形狀和文本組成形狀。 – Zan 2015-05-18 21:27:59

-1

其中一個例子：Force-Directed Graph

來源

2012-04-04 19:41:49 mihai

從我所知道的拉斐爾和我在那個例子中看到的我看不出我如何適應我必須與d3一起工作。你能爲我指出正確的方向嗎？ – 2012-04-04 19:54:55

你可以和拉斐爾一起繪畫，讓d3從那裏接管。 Unfotunatelly我不擅長他們其中的任何一個:(你是否僅限於使用Raphael？ – mihai 2012-04-04 20:14:05

我已經寫了一個腳本來完成我所需要的一切，在這一點上我只是想添加一個強制定向算法，這樣我的Raphael對象不重疊 – 2012-04-05 14:51:56

向Raphael SVG對象添加強制定向算法

回答

相關問題