backbone+rappid实现一个可连接添加节点的树状结构图效果代码-html代码-BFW代码库

backbone+rappid实现一个可连接添加节点的树状结构图效果代码

代码语言：html

所属分类：图表

代码描述：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: ["a.........完整代码请登录后点击上方下载按钮下载查看