将节点放在 cytoscape 中父节点的边界上答案

【问题标题】：Put nodes on the border of the parent in cytoscape将节点放在 cytoscape 中父节点的边界上
【发布时间】：2016-08-30 23:34:34
【问题描述】：

我想把子节点放在父节点的边界上（如果可能的话，均匀分布）而不是在父节点内。

这可以实现吗？假设我可以以某种方式获取父级的位置和大小并基于此设置子级的位置？我仍然希望边缘尽可能短，并且当我添加更多节点和边缘时，尝试自己设置坐标将是一团糟所以最好是布局算法完成节点分布的工作，只是希望它们在边界上移出。

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

【问题讨论】：

标签： cytoscape.js

【解决方案1】：

A compound parent node does not have an independent position or size. 它只适合它的孩子。

因此，您可以通过相对于其兄弟节点定位子节点，将子节点放置在父节点的边缘（但不能超出它）。确保在父节点上将填充设置为零。

强制导向布局将尝试最小化每个父节点占用的区域，因为这是一个非常理想的属性。这意味着对于由三个或更多兄弟组成的组，布局倾向于将节点放在中间。

您的标准与复合力导向布局的总体目标不一致，因此您可以尝试将排斥力设置得非常高，或者您可以使用自己的自定义逻辑write an extension。

【讨论】：