將節點放在父節點的邊界上細胞景觀

我想將子節點放在父節點的邊界上（如果可能，均勻分佈），而不是在父節點內。將節點放在父節點的邊界上細胞景觀

這可以實現嗎？假設我能以某種方式獲得父母的位置和大小，並基於此設置孩子的位置？我仍然希望邊緣儘可能短，並且當我添加更多的節點和邊緣時，嘗試自己設置座標會很麻煩因此，如果佈局算法完成分佈節點的工作，只是希望他們搬出邊界。

<style> 
    body { 
     font-family: helvetica; 
     font-size: 14px; 
    } 

    #cy { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     left: 0; 
     top: 0; 
     z-index: 999; 
    } 

    h1 { 
     opacity: 0.5; 
     font-size: 1em; 
    } 
</style> 

<script> 
    $(function(){ 

     var cy = window.cy = cytoscape({ 
      container: document.getElementById('cy'), 

      layout: { 
       name: 'cose-bilkent' 
      }, 

      style: [ 
      { 
       selector: 'node', 
       style: { 
        shape: 'roundrectangle', 
        width: 10, 
        height: 10, 
        'background-color': '#ad1a66', 
        label: function (ele) { return (ele.data('id')) } 
       } 
      }, 

      { 
       selector: ':parent', 
       style: { 
        width: 80, 
        height: 120, 
        'background-opacity': 0.333 
       } 
      }, 

      { 
       selector: 'edge', 
       style: { 
        'width': 3, 
        'line-color': '#ad1a66' 
       } 
      } 
      ], 

      elements: [ 
       { "data": { "id": "n2" }}, 
       { "data": { "id": "p6", "parent": "n2" }}, 
       { "data": { "id": "p1", "parent": "n2" }}, 
       { "data": { "id": "p4", "parent": "n2" }}, 
       { "data": { "id": "p7", "parent": "n2" }}, 
       { "data": { "id": "n3" }}, 
       { "data": { "id": "p2", "parent": "n3" }}, 
       { "data": { "id": "p5", "parent": "n3" }}, 
       { "data": { "id": "p8", "parent": "n3" }}, 
       { "data": { "id": "e46", "source": "p7", "target": "p2" }, "position": {}}, 
      ] 
    }); 

    }); 
</script>

來源

2016-08-30 user1859309

A compound parent node does not have an independent position or size.它只適合其子女。

因此，您可以將子節點放在父節點的邊緣 - 但不能超出它 - 通過將子節點相對於其兄弟節點進行定位。確保在父級上將填充設置爲零。

強制導向的佈局將盡量減少每個父節點佔用的面積，因爲這是非常理想的屬性。這意味着，對於三個或更多兄弟姐妹羣體，佈局會傾向於將節點放在中間。

您的標準與複合力指向佈局的總體目標不一致，因此您可以嘗試將斥力設置爲非常高，或者您可以使用自定義邏輯。

來源

2016-08-30 15:34:34 maxkfranz

將節點放在父節點的邊界上細胞景觀

回答

相關問題