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: ["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: backLinkColor,
        strokeDasharray: "2,2"
      }
    }
  });
}

function makeElement(id) {
  return new shapes.standard.Rectangle({
    id: id,
    z: 2,
    size: { width: 40, height: 40 },
    attrs: {
      label: {
        text: makeId(),
        fontSize: 16,
        fontFamily: "monospace",
        fill: textColor
      },
      body: {
        rx: 5,
        ry: 5,
        stroke: outlineColor,
        strokeWidth: 3,
        fill: "black",
        fillOpacity: 0.3
      }
    }
  });
}

// generate id in the form of 'a', 'b', 'c', ..., 'z', 'aa', 'ab', 'ac', ...
function numberToLetters(number) {
  let letters = "";
  while (number >= 0) {
    letters = String.fromCharCode(97 + (number % 26)) + letters;
    number = Math.floor(number / 26) - 1;
  }
  return letters;
}
let id = 0;
function makeId() {
  return numberToLetters(id++);
}

const cells = graphUtils.constructTree("a", {
  makeElement: (id) => makeElement(`id_${id}`),
  makeLink,
  children: (id) => list[id]
});

graph.addCells(cells);
graph.addCells([makeBackwardsLink({ id: "id_ae" }, { id: "id_adac" })]);

const [root] = graph.getSources();

// Create paper and populate the graph.
// ------------------------------------

const paper = new dia.Paper({
  width: "100%",
  height: "100%",
  model: graph,
  async: true,
  linkPinning: false,
  sorting: dia.Paper.sorting.APPROX,
.........完整代码请登录后点击上方下载按钮下载查看