Make the curvy edge into a straight edge in cytoscape.js

Question

I created a graph using Cytoscape.js and cytoscape-expand-collapse, but one edge has a curvy shep as shown in image 01. I want it as a straight arrow as shown in image 02. I tried changing the Edge line property to achieve that, but not worked. Can someone help me?

Answer 1

By default, the edges are set to straight property by cytoscape. If it is bending then it would be because there is an edge data object which flows from your node (src) to your outer group (target). Is this the case?

Answer 2

I could find a solution by adding a custom curve shep.

document.addEventListener("DOMContentLoaded", function () {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),

    ready: function () {
      var api = this.expandCollapse({
        layoutBy: {
          name: "cose-bilkent",
          animate: "end",
          randomize: false,
          fit: true,
        },
        fisheye: true,
        animate: false,
        undoable: false,
      });
      api.collapseAll();
    },

    style: [
      {
        selector: "node",
        style: {
          label: "data(id)",
        },
      },
      {
        selector: "edge.custom-shape",
        style: {
          width: 1,
          "curve-style": "unbundled-bezier",
          // "control-point-step-size": "15px",
          // "line-cap": "round",
          // "control-point-distances": "-20",
          // "control-point-weights": 0.1,
        },
      },
    ],

    elements: [
      { data: { id: "1" }, group: "nodes" },
      { data: { id: "2", parent: "1" }, group: "nodes" },
      { data: { id: "3", parent: "1" }, group: "nodes" },
      { data: { id: "4", parent: "1" }, group: "nodes" },
      { data: { id: "5" }, group: "nodes" },

      {
        data: { source: "2", target: "1", id: "6" },
        classes: "custom-shape",
        group: "edges",
      },
      {
        data: { source: "2", target: "3", id: "7" },
        group: "edges",
      },
      {
        data: { source: "2", target: "4", id: "8" },
        group: "edges",
      },
      {
        data: { source: "5", target: "1", id: "9" },
        group: "edges",
      },
    ],
  }));

  var api = cy.expandCollapse("get");
  api.expandAll();

  let adjustEdgeCurve = function (edge) {
    edge.style("control-point-distances", [
      -Math.max(edge.target().width() / 20, 15) +
        Math.random() * -Math.max(edge.target().width() / 10, 20),
      20,
      20,
    ]);
    edge.style("control-point-weights", [-10.1, 20, 21]);
  };

  cy.$(".custom-shape").forEach((edge) => adjustEdgeCurve(edge));
});

      body {
        font-family: helvetica;
        font-size: 14px;
      }
      #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
      }

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape@3.1.0/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-cose-bilkent@4.0.0/cytoscape-cose-bilkent.js"></script>
<script src="https://unpkg.com/cytoscape-expand-collapse@3.1.1/cytoscape-expand-collapse.js"></script>

<div id="cy"></div>