d3強制佈局線（y座標保持不變）

我試圖畫出我認爲等於d3中的力圖，但在一條扁平線中。我希望大約4-5點的大小不同，取決於它們的大小，它們之間的距離均勻（不是中心，但圓的兩側之間的距離應該是恆定的）和連接它們的線。因此，在ASCII格式，是這樣的：d3強制佈局線（y座標保持不變）

o---O---o---O

我試圖避免複雜的計算，以計算出中心座標，並開始和每行的結束，因此它似乎像力佈局可能做的伎倆。不幸的是，當我把它放在一起時，我似乎無法讓它工作得很好。很多時候點結束落後於其他點，等了4節點圖像上面，它找出來更多的東西一樣：

O---O

有沒有什麼辦法讓力佈局在一維的工作，而不是2 ？還是我堅持自己做所有的間距計算？我正在使用的代碼如下：

var width = 500; 
var height = 200; 
var svg = d3.select($el[0]) 
    .append('svg') 
    .attr('width', width) 
    .attr('height', height); 

var data_nodes = [ 
    { x: width/2, y: height/2, count: 5 }, 
    { x: width/2, y: height/2, count: 0 }, 
    { x: width/2, y: height/2, count: 1 }, 
    { x: width/2, y: height/2, count: 10 }, 
]; 

var data_links = [ 
    { source: 0, target: 1 }, 
    { source: 1, target: 2 }, 
    { source: 2, target: 3 }, 
]; 

var force = d3.layout.force() 
    .nodes(data_nodes) 
    .links(data_links) 
    .linkDistance(150) 
    .linkStrength(0.5) 
    .gravity(0.7) 
    .friction(0.3) 
    .size([width, height]) 
    .charge(-300); 

var links = svg.selectAll('line') 
    .data(data_links) 
    .enter() 
    .append('line') 
    .attr('stroke', '#65759E') 
    .attr('stroke-width', 4) 
    .attr('x1', function (d) { return data_nodes[d.source].x; }) 
    .attr('y1', function (d) { return data_nodes[d.source].y; }) 
    .attr('x2', function (d) { return data_nodes[d.target].x; }) 
    .attr('y2', function (d) { return data_nodes[d.target].y; }); 

var nodes = svg.selectAll('circle') 
    .data(data_nodes) 
    .enter() 
    .append('circle') 
    .attr('fill', '#65759E') 
    .attr('r', function (d) { return 10 + Math.sqrt(d.count) * 4; }) 
    .attr('cx', function (d, i) { return d.x + i * 10; }) 
    .attr('cy', function (d, i) { return d.y; }); 

force.on('tick', function() { 
    nodes.attr('cx', function (d) { return d.x; }); 
    links.attr('x1', function (d) { return d.source.x; }) 
    .attr('x2', function (d) { return d.target.x; }); 
}); 

force.start();

來源

2014-11-15 lobati

從頭開始創建此佈局比嘗試約束2D力佈局以創建漂亮的1D佈局可能要容易得多。但是，如果你真的想要，避免陷入重疊圓圈的方法是根據連接的順序，用連續排列的節點初始化圖形。 – AmeliaBR

只是在你的'tick'處理程序中重置y座標 –

@AmeliaBR似乎已經完成了這個技巧。如果您想將其作爲答案發布，我會將其標記爲正確。我開始嘗試自己創建佈局，但我必須做的計算有點痛苦。 – lobati

你遇到困難的事實，也沒有辦法爲節點，以避開對方不留你，迫使他們的1D線莖成。排斥力阻止節點通過另一節點的頂部到達另一側，因此它們陷入這些次優排列中。

默認情況下，d3強制佈局初始化隨機位置的節點。但是，您可以在開始佈局之前通過設置數據節點對象的x和y屬性來自行初始化它們。如果您根據連接的順序初始化圖中連續排列的節點，則力佈局可以爲您處理間距。

來源

2014-11-16 16:54:40 AmeliaBR

d3強制佈局線（y座標保持不變）

回答

相關問題