reactjscytoscape.js

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

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?enter image description here

Solution

  • 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>