时间戳

首页 > 解决方案 > 当用户点击节点时显示依赖边

javascript - 当用户点击节点时显示依赖边

问题描述

我正在使用 cytoscape.js 并尝试显示图形节点之间的边。我只想在单击该特定节点时才显示边缘。例如这里我有三个节点a -> b -> c：

如果我单击节点 c，则会出现 c 和 b 之间的边缘。如果我单击节点 b，则会出现从 a 到 b 到 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"
                }
            }
        ],
        elements: {
            nodes: [{
                data: {
                    id: "a"
                }
            }, {
                data: {
                    id: "b"
                }
            }, {
                data: {
                    id: "c"
                }
            }],
            edges: [{
                data: {
                    id: "ab",
                    source: "a",
                    target: "b"
                }
            },{
                data: {
                    id: "bc",
                    source: "b",
                    target: "c"
                }
            } ]
        },
        layout: {
            name: "grid"
        }
    }));

    cy.edges().forEach(function (edge) {
        cy.remove(edge)
    })

});
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

解决方案

此处不需要删除边缘，只需切换边缘的类并让 click 事件处理程序处理其余部分：

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: "edge.visible",
        style: {
          "visibility": "visible",
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
      }, {
        data: {
          id: "b"
        }
      }, {
        data: {
          id: "c"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        }
      }, {
        data: {
          id: "bc",
          source: "b",
          target: "c"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  cy.on("click", "node", function(event) {
    let connectedEdges = event.target.connectedEdges();
    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>

推荐阅读