cytoscape.js:如何防止相邻的滑行边缘重叠

我试图在cytoscape.js中使用Dagre布局和滑行边缘来显示节点如何连接到其他节点。但是,在某些情况下,由于边缘的拐角如何重叠,看来一个节点有多个父节点,而实际上它只有一个。

我尝试更改边缘的某些滑行样式设置,但是由于这些设置适用于所有边缘,因此我仍然遇到相同的问题(只是在不同的位置)。是否缺少我无法避免这些无关边缘重叠的配置设置?除此以外,是否有办法更改taxi-turn设置仅适用于某些边缘? (要使其更加复杂,这将需要与用户提供的任意节点/边缘一起使用,因此我无法处理特定的一次性问题。)


我在这里转载了该问题:https://stackblitz.com/edit/react-rj7ln4?file=index.js 具体来说,所讨论的边缘来自第一列的最后两个节点。

cytoscape.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
anyellow 回答:cytoscape.js:如何防止相邻的滑行边缘重叠

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3113642.html

大家都在问