在节点的右下角放置一条 cytoscape.js "loop" 边，逆时针方向

Question

如何设置 cytoscape.js 'loop edge' 的样式，使其围绕长（150 像素宽）矩形节点的右下角逆时针旋转？

我一直在摆弄样式设置，就是想不通。据我所知，我应该能够调整这些样式以获得我想要的：

      selector: '.loop',
        style: {
          'loop-direction': '?deg',
          'loop-sweep': '?deg',
          'target-endpoint': '90deg',
          'source-endpoint': '105deg',
        }
      },

类似于这个红色的箭头：

但我真的找不到比这个片段更好的东西了。我只是无法让曲线“翻转”到另一侧。

window.addEventListener('DOMContentLoaded', function() {

  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    
    style: [{
        selector: 'node',
        style: {
          'width': 150,
          'shape': 'rectangle',
          'background-opacity': 0.5,
        }
      },

      {
        selector: 'edge',
        style: {
          'line-color': 'black',
          'target-arrow-color': 'black',
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier'
        }
      },
      {
        selector: '.loop',
        style: {
          'loop-direction': '90deg', 
          'loop-sweep': '-90deg',
          'target-endpoint': '90deg',
          'source-endpoint': '105deg',
        }
      },

    ],

    elements: {
      nodes: [{
        data: {
          id: 'n16'
        }
      }],
      edges: [{
        data: {
          source: 'n16',
          target: 'n16'
        },
        classes: 'loop'
      }, ]
    }
  });

});

#cy {
  width: 300px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.1/cytoscape.min.js"></script>

<body>
  <h1>cytoscape loop edge demo</h1>

  <div id="cy"></div>

</body>

Answer 1

你的想法是正确的，但当用角度指定端点（它们是相对于形状边界的！）时，Cytoscape 似乎总是默认顺时针循环。

如果您不求助于可以手动指定控制点（以及边缘曲线）的“非捆绑贝塞尔曲线”，那么使用端点的预定义值可能就足够了：

window.addEventListener('DOMContentLoaded', function() {

  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    
    style: [{
        selector: 'node',
        style: {
          'width': 150,
          'shape': 'rectangle',
          'background-opacity': 0.5,
        }
      },

      {
        selector: 'edge',
        style: {
          'line-color': 'black',
          'target-arrow-color': 'black',
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier'
        }
      },
      {
        selector: '.loop',
        style: {
          'loop-direction': '90deg', 
          'loop-sweep': '-90deg',
          'target-endpoint': 'outside-to-line',
          'source-endpoint': 'outside-to-line',
        }
      },

    ],

    elements: {
      nodes: [{
        data: {
          id: 'n16'
        }
      }],
      edges: [{
        data: {
          source: 'n16',
          target: 'n16'
        },
        classes: 'loop'
      }, ]
    }
  });

});

#cy {
  width: 300px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.1/cytoscape.min.js"></script>

<body>
  <h1>cytoscape loop edge demo</h1>

  <div id="cy"></div>

</body>

您可以在此处找到这些值的参考：

https://js.cytoscape.org/#style/edge-endpoints

Answer 2

能够通过添加 control-point-step-size 键然后摆弄所有拨号盘来使其工作。我希望有一个“调试”模式，我可以在其中看到这些转盘操纵的控制点和贝塞尔曲线：

  'loop-direction': '100deg', 
  'loop-sweep': '-20deg',
  'target-endpoint': '90deg',  // Up is 0 deg, going clockwise. From center of node, where the edge ends (pointing back into the node. 
  'source-endpoint': '105deg',  // Up is 0 deg, going clockwise. From center of node, where the edge comes out of the node.  
  'control-point-step-size': 72,

window.addEventListener('DOMContentLoaded', function() {

  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    
    style: [{
        selector: 'node',
        style: {
          'width': 150,
          'shape': 'rectangle',
          'background-opacity': 0.5,
        }
      },

      {
        selector: 'edge',
        style: {
          'line-color': 'black',
          'target-arrow-color': 'black',
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier'
        }
      },
      {
        selector: '.loop',
        style: {
          'loop-direction': '100deg', 
          'loop-sweep': '-20deg',
          'target-endpoint': '90deg',
          'source-endpoint': '105deg',
          'control-point-step-size': 72,
        }
      },

    ],

    elements: {
      nodes: [{
        data: {
          id: 'n16'
        }
      }],
      edges: [{
        data: {
          source: 'n16',
          target: 'n16'
        },
        classes: 'loop'
      }, ]
    }
  });

});

#cy {
  width: 300px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.1/cytoscape.min.js"></script>

<body>
  <h1>cytoscape loop edge demo</h1>

  <div id="cy"></div>

</body>

在节点的右下角放置一条 cytoscape.js "loop" 边，逆时针方向

Positioning a cytoscape.js "loop" edge in the bottomright of a node, going counter clockwise

cytoscape.js