在 cytoscape.js 中将弯曲的边缘变成直边

Question

我使用

Cytoscape.js

和

cytoscape-expand-collapse

创建了一个图形，但是一个边缘有一个弯曲的 shep，如图 01 所示。我希望它是一个直箭头，如图 02 所示。我尝试更改边缘线属性来实现这一点，但没有奏效。有人可以帮助我吗？

Answer 1

默认情况下，cytoscape 将边缘设置为直线属性。如果它正在弯曲，那将是因为有一个边缘数据对象从您的节点 (src) 流向您的外部组 (target)。是这样吗？

Answer 2

我可以通过添加自定义曲线 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/[email protected]/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/[email protected]/cytoscape-cose-bilkent.js"></script>
<script src="https://unpkg.com/[email protected]/cytoscape-expand-collapse.js"></script>

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