サイトスコープで親の境界線にノードを配置する

Question

親ノードの内部ではなく、親ノードの境界線にできるだけ均等に配置したいと考えています。

これを達成できますか？私は何とか親の位置とサイズを取得し、これに基づいて子供の位置を設定できると仮定しますか？ まだエッジをできるだけ短くしたいと思います。さらにノードとエッジを追加すると、自分自身で座標を設定しようとする混乱となります レイアウトアルゴリズムがノードを分散するという仕事をしたら彼らが国境に出て行こうと思っているだけです。

<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> 

Answer 1

A compound parent node does not have an independent position or size.ちょうどその子供に合っています。

したがって、子ノードをその兄弟に対して相対的に配置することによって、親ノードの端に子ノードを配置できます。親のパディングをゼロに設定してください。

力指向のレイアウトは、非常に望ましいプロパティであるため、各親ノードが占有する領域を最小限に抑えようとします。つまり、3つ以上の兄弟のグループの場合、レイアウトはノードを中央に配置する傾向があります。

あなたの判断基準は、複合力指向型レイアウトの一般的な目標とは異なるため、反発力を本当に高く設定するか、write an extension独自のカスタムロジックで設定できます。