Cytoscape.js 中 Cose-Bilkent 的边缘捆绑
Edge bundling for Cose-Bilkent in Cytoscape.js
我正在使用 Cose-Bilkent 布局来显示嵌套图,但是当边太多时它会变得有点乱。为了以视觉方式改进图表,我正在考虑对图表使用一些边缘捆绑。我一直在做一些研究,似乎我应该能够通过设置诸如 control-point-step-size and/or control-point-weight 之类的东西来做到这一点,但我仍然不清楚该怎么做说实话。我的想法是根据某个父节点的位置设置该控制点。下面我附上一张截图,上面有我想要得到的草图(抱歉草图不好)。有人可以指导我如何获得父控制点然后设置边缘吗? enter image description here谢谢!
我认为您只需要将控制点属性添加到您的样式中即可:)
您可以使用 bezier edge-style or the unbundled 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
}
});
我正在使用 Cose-Bilkent 布局来显示嵌套图,但是当边太多时它会变得有点乱。为了以视觉方式改进图表,我正在考虑对图表使用一些边缘捆绑。我一直在做一些研究,似乎我应该能够通过设置诸如 control-point-step-size and/or control-point-weight 之类的东西来做到这一点,但我仍然不清楚该怎么做说实话。我的想法是根据某个父节点的位置设置该控制点。下面我附上一张截图,上面有我想要得到的草图(抱歉草图不好)。有人可以指导我如何获得父控制点然后设置边缘吗? enter image description here谢谢!
我认为您只需要将控制点属性添加到您的样式中即可:) 您可以使用 bezier edge-style or the unbundled 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
}
});