我试图在cytoscape.js中使用Dagre布局和滑行边缘来显示节点如何连接到其他节点。但是,在某些情况下,由于边缘的拐角如何重叠,看来一个节点有多个父节点,而实际上它只有一个。
我尝试更改边缘的某些滑行样式设置,但是由于这些设置适用于所有边缘,因此我仍然遇到相同的问题(只是在不同的位置)。是否缺少我无法避免这些无关边缘重叠的配置设置?除此以外,是否有办法更改taxi-turn
设置仅适用于某些边缘? (要使其更加复杂,这将需要与用户提供的任意节点/边缘一起使用,因此我无法处理特定的一次性问题。)
我在这里转载了该问题:https://stackblitz.com/edit/react-rj7ln4?file=index.js 具体来说,所讨论的边缘来自第一列的最后两个节点。
样式,包括出租车设置配置
const styles = [
// disable the visible selector when clicking to pan
{
selector: "core",style: {
"active-bg-opacity": 0
}
},// basic styling for nodes
{
selector: "node",style: {
"background-clip": "none",shape: "rectangle","background-opacity": 0,"font-family": "serif"
}
},// disable overlay when clicking on nodes or edges
{
selector: "node,edge",style: {
"overlay-opacity": 0.1
}
},// basic styles for edges
{
selector: "edge,edge:selected",style: {
"line-color": "rgb(143,156,173)","curve-style": "taxi","edge-distances": "node-position","taxi-direction": "horizontal","taxi-turn": "75%","taxi-turn-min-distance": "30px","target-endpoint": "outside-to-node","target-arrow-shape": "triangle","target-arrow-color": "rgb(143,"target-distance-from-node": 15
}
},// hide the boundary around compound nodes
{
selector: "node:parent",style: {
opacity: 0.91
}
}
];
用于复制的节点和边的数组
const elements = [
{
data: {
id: "A",title: "A"
}
},{
data: {
id: "B",title: "B"
}
},{
data: {
id: "C",title: "C"
}
},{
data: {
id: "D",title: "D"
}
},{
data: {
id: "E",title: "E"
}
},{
data: {
id: "F",title: "F"
}
},{
data: {
id: "AD",source: "A",target: "D"
}
},{
data: {
id: "BD",source: "B",{
data: {
id: "CE",source: "C",target: "E"
}
},{
data: {
id: "DF",source: "D",target: "F"
}
},{
data: {
id: "EF",source: "E",target: "F"
}
}
];
- Cytoscape.js版本:3.10.0
- 浏览器和版本:macOS 10.14.6上的Firefox 70.0.1 / Chrome 78.0.3904.97