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.它恰好适合其子女。

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

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

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

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

1 个答案: