visjs实现可撤销修改添加节点连线的网络图表效果代码-html代码-BFW代码库

visjs实现可撤销修改添加节点连线的网络图表效果代码

代码语言：html

所属分类：图表

代码描述：visjs实现可撤销修改添加节点连线的网络图表效果代码线条交织动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        #mynetwork {
          position: relative;
          width: 800px;
          height: 600px;
          border: 1px solid lightgray;
        }
        
        #network-popUp {
          display: none;
          position: absolute;
          top: 350px;
          left: 170px;
          z-index: 299;
          width: 250px;
          height: 120px;
          background-color: #f9f9f9;
          border-style: solid;
          border-width: 3px;
          border-color: #5394ed;
          padding: 10px;
          text-align: center;
        }
        
        #button_undo,
        #button_redo {
          position: relative;
          display: inline-block;
          padding-left: 6px;
          padding-right: 6px;
          padding-top: 1px;
          padding-bottom: 1px;
          color: #878787;
          cursor: pointer;
        }
        
        #button_undo:hover,
        #button_redo:hover {
          background-color: #dadada;
        }
    </style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vis-network.4.21.0.css">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis.4.21.0.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>


</head>


<body onload="draw();">
    <h2>Network with undo/redo</h2>
    <div id="button_undo">undo
        <i class="fas fa-arrow-left "></i>
    </div>
    <div id="button_redo">redo
        <i class="fas fa-arrow-right  "></i>
    </div>
    <div id="network-popUp">
        <span id="operation">node</span> <br>
        <table style="margin:auto;">
            <tr>
                <td>id</td>
                <td><input id="node-id" value="new value" /></td>
            </tr>
            <tr>
                <td>label</td>
                <td><input id="node-label" value="new value" /></td>
            </tr>
        </table>
        <input type="button" value="save" id="saveButton" />
        <input type="button" value="cancel" id="cancelButton" />
    </div>
    <br />
    <div id="mynetwork"></div>




    <script>
        function destroy() {
          if (network !== null) {
            network.destroy();
            network = null;
          }
        }
        
        function draw() {
          destroy();
          nodes = [];
          edges = [];
          // create a network
          var container = document.getElementById("mynetwork");
          var options = {
            manipulation: {
              addNode: function (data, callback) {
                // filling in the popup DOM elements
                document.getElementById("operation").innerHTML = "Add Node";
                document.getElementById("node-id").value = data.id;
                document.getElementById("node-label").value = data.label;
                document.getElementById("saveButton").onclick = saveData.bind(
                this,
                data,
                callback);
        
                document.getElementById("cancelButton").onclick = clearPopUp.bind();
                document.getElementById("network-popUp").style.display = "block";
              },
              editNode: function (data, callback) {
                // filling in the popup DOM elements
                document.getElementById("operation").innerHTML = "Edit Node";
                document.getElementById("node-id").value = data.id;
                document.getElementById("node-label").value = data.label;
                document.getElementById("saveBut.........完整代码请登录后点击上方下载按钮下载查看