backbone+rappid实现一个可连接添加节点的树状结构图效果代码
代码语言:html
所属分类:图表
代码描述:backbone+rappid实现一个可连接添加节点的树状结构图效果代码,可添加拖拽节点,支持节点之间连线。
代码标签: backbone rappid 可连接 添加 节点 树状 结构图
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/rappid.css"> <style> #paper-container { position: absolute; right: 0; top: 0; left: 0; bottom: 0; background-color: #002b33; } #logo { position: absolute; bottom: 20px; right: 0; } </style> </head> <body> <div id="paper-container"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.3.6.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rappid.js"></script> <script> const { dia, shapes, anchors, ui, linkTools, elementTools, mvc, util, graphUtils, layout } = joint; const list = { a: ["ab", "ac", "ad", "ae", "aa"], ab: ["aba"], ac: ["aca", "acb"], aba: [], aca: ["acaa", "acab"], acb: [], ad: ["ada"], ada: ["adaa", "adab", "adac"], ae: ["aea", "aeb"], aea: ["aeaa", "aeab"], aeb: [], aa: ["aaa", "aab"], adaa: [], adab: [], adac: [], aeaa: [], aeab: [], acaa: [], acab: [], aaa: [], aab: [] }; const graph = new dia.Graph({}, { cellNamespace: shapes }); const treeGraph = new dia.Graph({}, { cellNamespace: shapes }); // Sync the graphs, omit the backwards links in the tree graph. graph.on("add", (cell) => { if (cell.isLink() && cell.get("backwards")) return; treeGraph.addCell(cell, { dry: true, sort: false }); }); const linkColor = "#b5dbff"; const backLinkColor = "#80ffd5"; const outlineColor = "#80aaff"; const textColor = "#eaff80"; function makeLink(parentElement = {}, childElement = {}) { return new shapes.standard.Link({ source: { id: parentElement.id }, target: { id: childElement.id }, z: 1, attrs: { line: { stroke: linkColor, targetMarker: { type: "path", d: "M 6 -3 0 0 6 3 z" } } } }); } function makeBackwardsLink(parentElement = {}, childElement = {}) { return new shapes.standard.Link({ backwards: true, z: 3, source: { id: childElement.id }, target: { id: parentElement.id }, connector: { name: "curve" }, attrs: { line: { stroke.........完整代码请登录后点击上方下载按钮下载查看
网友评论0