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

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.刚好适合child人

因此，您可以将 child 节点放置在 parent 的边缘——但不能超过它——通过相对于其兄弟节点定位 child。确保在 parent.

上将填充设置为零

Force-directed 布局将尽量减少每个 parent 节点占用的区域，因为这是非常理想的属性。这意味着对于三个或更多兄弟姐妹的组，布局将倾向于将节点放在中间。

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

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

Put nodes on the border of the parent in cytoscape

cytoscape.js