我的细胞景观图有一条从一个节点到另一个节点的边，在第三个节点后面交叉.我该如何避免这种情况

我做了一个细胞景观图，其中所有的边都是直的，布局是"宽度优先"的(我只是随意选择了布局(，它给出了一个误导性的图表。例如，假设节点RH4连接到节点E8。该连接直接通过另一个节点(RH1(，因此E8和RH4看起来都像是连接到RH1。事实上，他们不应该是。以下是导致这种情况的代码：

var cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'background-color': 'mapData(activation, -1, 1, blue, red)',
'label': 'data(id)'
}
}, {
selector: 'edge',
style: {
'width': 3,
'line-color': function(ele) {
return ele.data('relation')
},
'target-arrow-color': function(ele) {
return ele.data('relation')
},
'target-arrow-shape': 'triangle'
}
}],
layout: {
name: 'breadthfirst'
},
elements: {
nodes: [{
group: 'nodes',
data: {
id: 'E1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E5',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E6',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E7',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E8',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH4',
activation: 0
}
}
],
edges: [{
group: 'edges',
data: {
id: 'edge0',
source: 'E4',
target: 'E5',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge1',
source: 'E6',
target: 'E7',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge2',
source: 'LH1',
target: 'E1',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge3',
source: 'LH1',
target: 'RH1',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge4',
source: 'LH2',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge5',
source: 'LH3',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge6',
source: 'LH4',
target: 'E6',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge7',
source: 'RH1',
target: 'E2',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge8',
source: 'RH1',
target: 'E3',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge9',
source: 'RH2',
target: 'E5',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge10',
source: 'RH3',
target: 'E7',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge11',
source: 'RH4',
target: 'E8',
relation: 'red'
}
}
]
}
});

body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}

<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

这个问题的原因是"宽度优先"布局将节点放在特定的位置，并且边必须是直的吗？有没有一种方法可以使弯曲的边不穿过其他节点？或者答案在其他地方？

感谢

您使用的是breadthfirst布局，这就是问题所在：

正如您在这里所读到的，breadthfirst布局将节点放在层次结构中，基于图的breadthfirst遍历。它最适合默认自上而下模式下的树木和森林，也最适合圆形模式下的DAG。

如果你在一组不相连的随机元素中使用这种布局，这将更适合Dagre布局：

var cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'background-color': 'mapData(activation, -1, 1, blue, red)',
'label': 'data(id)'
}
}, {
selector: 'edge',
style: {
'width': 3,
'line-color': function(ele) {
return ele.data('relation')
},
'target-arrow-color': function(ele) {
return ele.data('relation')
},
'target-arrow-shape': 'triangle'
}
}],
layout: {
name: 'dagre'
},
elements: {
nodes: [{
group: 'nodes',
data: {
id: 'E1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E5',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E6',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E7',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E8',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH4',
activation: 0
}
}
],
edges: [{
group: 'edges',
data: {
id: 'edge0',
source: 'E4',
target: 'E5',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge1',
source: 'E6',
target: 'E7',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge2',
source: 'LH1',
target: 'E1',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge3',
source: 'LH1',
target: 'RH1',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge4',
source: 'LH2',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge5',
source: 'LH3',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge6',
source: 'LH4',
target: 'E6',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge7',
source: 'RH1',
target: 'E2',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge8',
source: 'RH1',
target: 'E3',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge9',
source: 'RH2',
target: 'E5',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge10',
source: 'RH3',
target: 'E7',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge11',
source: 'RH4',
target: 'E8',
relation: 'red'
}
}
]
}
});

body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}

<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.1.0/cytoscape-dagre.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

Dagre使用DAG(有向无环图(算法来组织图，该算法更适合于这样的非连通图。

附言：请重新审视你以前的问题，并添加你要求的答案(你作为评论发布的(。感谢

相关内容

最新更新

热门标签：