提供两种不同类型的边缘，并保留一个具有自身特征的不可移动边缘

Question

我在这里要做的是创建不可移动的边缘。例如，我在 a 和 b 之间有一条边，当我点击其中一个时，边应该仍然可见，他的颜色也会没有改成红色。当我单击节点 b 时，只应为节点 c 创建一条边，颜色为红色，对于 c[ 也是一样=28=] 节点等等...

提前感谢您的帮助。

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>

Answer 1

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

你应该澄清，classes 可以解决的范围，你这样做的方式，一个节点可以有 class fixedEdge。尽管您必须手动将其添加到节点，但最好只编写如下内容：

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

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

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>

提供两种不同类型的边缘，并保留一个具有自身特征的不可移动边缘

Give two different kind of edges and keep one non removable with it´s own features

javascript

css

cytoscape.js