时间戳

首页 > 解决方案 > 提供两种不同类型的边缘，并保持一种具有自身功能的不可移动

javascript - 提供两种不同类型的边缘，并保持一种具有自身功能的不可移动

问题描述

我在这里尝试做的是创建不可移动的边缘。例如，我在a和b之间有一条边，当我单击其中一个时，该边应该仍然可见，并且他的颜色也不会变为红色。当我单击节点b时，应该只为节点c创建一条边，颜色为红色，对于c节点，以此类推...

提前感谢您的帮助。

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),
    style: [{
        selector: "node",
        style: {
          content: "data(id)"
        }
      },
      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle",
          "visibility": "hidden", 
          "line-color": "#61bffc",
        }
      },
      {
        selector: ".fixededge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle",
          "line-color": "#61bffc",
        }
      },
      {
        selector: ".visible",
        style: {
          "visibility": "visible"
        }
      },
      {
        selector: "edge.visible",
        style: {
          "visibility": "visible",
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
        
      }, {
        data: {
          id: "b"
        }
      }, {
        data: {
          id: "c"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        },
        classes:["visible"]
      }, {
        data: {
          id: "bc",
          source: "b",
          target: "c"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  cy.on("click", "node", function(event) {
    let connectedEdges = event.target.connectedEdges().style('line-color', 'red');
    connectedEdges.toggleClass("visible");
  });
});
body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.4/cytoscape-popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@4.0.1/umd/index.all.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@4.0.1/index.css" />
</head>

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

标签： javascriptcsscytoscape.js

解决方案

您可以为此使用一个类，就像您已经对可见性所做的那样。不过一般来说，你有一些奇怪的类，比如.visible和.fixedEdge：

您应该澄清，类可以解决的范围，您执行此操作的方式，节点可以具有类fixedEdge。尽管您必须手动将其添加到节点，但最好还是编写如下内容：

{
    selector: "edge.fixed",
    style: {
      "line-color": "#61bffc",
      "target-arrow-color": "#61bffc",
    }
},
{
    selector: "edge.visible",
    style: {
      "visibility": "visible",
    }
}

您的代码的主要区别是事件处理程序中的一个简单的 if 子句。通过使用hasClass()函数，您可以查询.fixed的存在，并简单地忽略以下类切换。此外，我将.fixed类添加到边缘类列表中：

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),
    style: [{
        selector: "node",
        style: {
          content: "data(id)"
        }
      },
      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle",
          "visibility": "hidden",
          "line-color": "red",
          "target-arrow-color": "red",
        }
      },
      {
        selector: "edge.fixed",
        style: {
          "line-color": "#61bffc",
          "target-arrow-color": "#61bffc",
        }
      },
      {
        selector: "edge.visible",
        style: {
          "visibility": "visible",
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }

      }, {
        data: {
          id: "b"
        }
      }, {
        data: {
          id: "c"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        },
        classes: ["visible", "fixed"]
      }, {
        data: {
          id: "bc",
          source: "b",
          target: "c"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  cy.on("click", "node", function(event) {
    event.target.connectedEdges().each(function(edge) {
      if (!edge.hasClass("fixed")) {
        edge.toggleClass("visible");
      }
    });
  });
});
body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.4/cytoscape-popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@4.0.1/umd/index.all.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@4.0.1/index.css" />
</head>

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

推荐阅读