Question

我试图在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,156,173)",
      "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",
      target: "D"
    }
  },
  {
    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

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

0 个答案: