定位cytoscape.js“；“循环”；节点右下角的边，逆时针方向移动

如何设置cytoscape.js“”的样式，使其围绕长（150px宽）矩形节点的右下角逆时针旋转

我一直在摆弄样式设置，就是搞不懂。我能说的最好的是，我应该能够调整这些样式，以获得我想要的：

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

红色的箭头：

但我真的找不到比这个片段更好的了。我就是不能让曲线“翻转”到另一边

window.addEventListener（'DOMContentLoaded'，function（）{
var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
风格：[{
选择器：'节点'，
风格：{
“宽度”：150，
“形状”：“矩形”，
“背景不透明度”：0.5，
}
},
{
选择器：'边'，
风格：{
“线条颜色”：“黑色”，
“目标箭头颜色”：“黑色”，
'目标箭头形状'：'三角形'，
“曲线样式”：“贝塞尔”
}
},
{
选择器：'.loop'，
风格：{
“循环方向”：“90度”，
“循环扫描”：“-90度”，
“目标端点”：“90度”，
“源端点”：“105度”，
}
},
],
要素：{
节点：[{
数据：{
id:'n16'
}
}],
边缘：[{
数据：{
资料来源：“n16”，
目标：“n16”
},
类：“循环”
}, ]
}
});
});
#cy{
宽度：300px；
高度：200px；
}

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

如果您不求助于“未绑定的bezier边”，在这里您可以手动指定控制点（从而指定边的曲线），那么为端点使用预定义值可能就足够了：


window.addEventListener（'DOMContentLoaded'，function（）{
var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
风格：[{
选择器：'节点'，
风格：{
“宽度”：150，
“形状”：“矩形”，
“背景不透明度”：0.5，
}
},
{
选择器：'边'，
风格：{
“线条颜色”：“黑色”，
“目标箭头颜色”：“黑色”，
'目标箭头形状'：'三角形'，
“曲线样式”：“贝塞尔”
}
},
{
选择器：'.loop'，
风格：{
“循环方向”：“90度”，
“循环扫描”：“-90度”，
“目标端点”：“线外”，
“源端点”：“外部到行”，
}
},
],
要素：{
节点：[{
数据：{
id:'n16'
}
}],
边缘：[{
数据：{
资料来源：“n16”，
目标：“n16”
},
类：“循环”
}, ]
}
});
});
#cy{
宽度：300px；
高度：200px；
}

cytoscape循环边缘演示
通过添加
控制点步长
键，然后摆弄所有的刻度盘，可以让它工作。我希望有一个“调试”模式，我可以看到控制点和贝塞尔的东西，这些拨号操作：

  '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({
容器：document.getElementById（'cy'），
风格：[{
选择器：'节点'，
风格：{
“宽度”：150，
“形状”：“矩形”，
“背景不透明度”：0.5，
}
},
{
选择器：'边'，
风格：{
“线条颜色”：“黑色”，
“目标箭头颜色”：“黑色”，
'目标箭头形状'：'三角形'，
“曲线样式”：“贝塞尔”
}
},
{
选择器：'.loop'，
风格：{
“回路方向”：“100度”，
“循环扫描”：“-20度”，
“目标端点”：“90度”，
“源端点”：“105度”，
“控制点步长”：72，
}
},
],
要素：{
节点：[{
数据：{
id:'n16'
}
}],
边缘：[{
数据：{
资料来源：“n16”，
目标：“n16”
},
类：“循环”
}, ]
}
});
});
#cy{
宽度：300px；
高度：200px；
}

cytoscape循环边缘演示
谢谢！你能让它不通过节点吗？i、 e.将其推到最右边，使其围绕节点的外侧？我将检查使用所提到的“未绑定的bezier边”是否是您最初想要的解决方案。例如，手动设置曲线（边）的控制点时。基于文档和测试，我认为这是唯一可行的方法。可能需要一段时间，我要去度假了。谢谢。再次查看我也没有尝试过的文档
与节点的源距离