Cytoscape.js中Cose-Bilkent的边缘捆绑

时间:2018-09-19 15:52:58

标签: cytoscape.js

我正在使用Cose-Bilkent布局来显示嵌套图,但是当边缘太多时,它会变得有些混乱。为了以视觉方式改善图形,我正在考虑对图形使用一些边缘捆绑。我一直在做一些研究,看来我应该可以通过设置控制点步长和/或控制点权重来做到这一点,但我仍然不清楚如何做到这一点。诚实。我的想法是根据某个父节点的位置设置该控制点。下面,我附上一张屏幕快照,其中包含我想要得到的草图(对不起,草图很抱歉)。有人可以指导我一些如何获得父控制点,然后设置边缘是否合适? enter image description here谢谢!

1 个答案:

答案 0 :(得分:0)

我认为您只需要在样式中添加控制点属性即可:) 您可以使用bezier edge-styleunbundled bezier edge-style

var cy = cytoscape({

  container: yourContainer, // container to render in

  elements: yourElements,

  style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': yourColor,
        'label': yourLabel
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
        'curve-style': 'bezier',
        // 'curve-style': 'unbundled-bezier', // this is a manual bezier, maybe try out this one too
        'control-point-things': xyz
      }
    }
  ],

  layout: {
    name: yourLayout
  }

});