Cytoscape.js堆叠的边缘

Question

我希望能够通过cytoscape.js使用颜色在一行（边缘）上显示多个信息。 我可以在几个边缘上显示它，但是使用贝塞尔曲线会大大增加视觉结果的复杂性，并且直边重叠，我可以找到一种抵消它们的方法...

这是所需输出的一个示例，查看粉红色的黄色和深色的品红色线条：

（沿着线点划线的3种颜色的解决方案也适用，但是似乎我也不能用cytoscape.js做到这一点。）

关于如何执行此操作的任何想法？ 还是另一种用颜色显示此类信息的方法？

Answer 1

您可以使用视觉样式属性控制边缘端点： https : //js.cytoscape.org/#style/edge-endpoints

例如，所有红色边缘可能具有source-endpoint: 0 -5px而所有黄色边缘可能具有source-endpoint: 0 5px 。 您需要同时处理源端和目标端的端点，并且需要适当地调整线宽以消除空格。

您也可以使用控制点步长较小的捆绑贝塞尔曲线边缘。 但是，这些边缘将朝节点逐渐变细。

截至2019年8月，没有用于“糖果条纹”自动边缘的样式属性集。