D3手動定位具有特定ID的節點

我有一個數組，其中包含需要顯示的節點的ID。該陣列看起來像這樣list_of_people = ['1887', '1892', '1888' ...]。D3手動定位具有特定ID的節點

我試圖讓圖像看起來就像一個家庭樹。我嘗試過Dagre佈局，但節點佈局並不是我想要的（它接近所需但不包含某些特定用例），因此我決定手動定位節點。

我已經創建ID的陣列以每一代。例如：grandparent_generation = ['1893', '1889' ...],parent_generation = ['1887', '1886'...]等等。

我想要做的是每一代手動定位（每一代將具有用於在生成的節點相同的y值和不同的x值）。

我當前的代碼看起來是這樣的：

var width = 960, 
    height = 500; 


var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var force = d3.layout.force() 
    .size([width, height]);  


force 
    .nodes(list_of_people) 
    .start(); 


var node = svg.selectAll(".node") 
    .data(list_of_people) 
    .enter().append("g") 
    .attr("class", "node") 


node.append("image") 
    .attr("xlink:href", "https://github.com/favicon.ico") 
    .attr("x", -8) 
    .attr("y", -8) 
    .attr("width", 16) 
    .attr("height", 16);

，所有的節點都在一個位置。

我不知道，如果力佈局是正確的。我在想，如果這是可以做到的圖紙沒有佈局，因爲我要計算每個節點的位置手動

是否有D3的方式給予一定的ID每個節點的自定義位置？

在Cytoscape.js這應該是這樣的：

for (i=0; i<grandchildren_generation.length; i++){ 
    x += 100; 
    y = 150; 
    cy.$('#' + grandchildren_generation[i]).position({x:x, y:y}); 
}

來源

2017-08-01 Porjaz

也許這個例子可以幫助你：https：//bl.ocks.org/mbostock/4339083。 IMO力佈局不爲這種樹的 –

做的非常類似的東西在這裏https://stackoverflow.com/questions/31245751/how-do-you-create-a-family-tree-in-d3-js/做31367673＃31367673可能會對您有所幫助。 – Cyril

@Cyril問題是樹佈局需要嵌套的JSON。我的JSON是平坦的，我想避免嵌套它，因爲它最終會變得太複雜。這就是爲什麼我考慮不使用任何佈局，如果可能的話，只給每個節點一定的ID。既然我會給所有的位置，我不必擔心節點重疊。節點放置後，我可以繪製出具有類似之字形的SVG線以連接節點 – Porjaz

如果你已經有你的位置節點，你應該把它添加到您的數據

{name: 1887, x: 40, y: 5}

然後，你可以簡單地重複使用它們

.attr("x", function(d) { 
    return d.x; 
}) 
.attr("y", function(d) { 
    return d.y; 
})

見https://jsfiddle.net/mf1hpjx1/

來源

2017-08-01 13:21:11

D3手動定位具有特定ID的節點

回答

相關問題