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

代码语言：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("saveButton").onclick = saveData.bind(
                this,
                data,
                callback);
        
                document.getElementById("cancelButton").onclick = cancelEdit.bind(
                this,
                callback);
        
                document.getElementById("network-popUp").style.display = "block";
              },
              addEdge: function (data, callback) {
                if (data.from == data.to) {
                  var r = confirm("Do you want to connect the node to itself?");
                  if (r == true) {
                    callback(data);
                  }
                } else {
                  callback(data);
                }
              } } };
        
        
          network = new vis.Network(container, data, options);
        }
        
        function clearPopUp() {
          document.getElementById("saveButton").onclick = null;
          document.getElementById("cancelButton").onclick = null;
          document.getElementById("network-popUp").style.display = "none";
        }
        
        function cancelEdit(callback) {
          clearPopUp();
          callback(null);
        }
        
        function saveData(data, callback) {
          data.id = document.getElementById("node-id").value;
          data.label = document.getElementById("node-label").value;
          clearPopUp();
          callback(data);
        }
        var network = null;
        var node_init = [
        {
          id: 1,
          label: "Node 1" },
        
        {
          id: 2,
          label: "Node 2" },
        
        {
          id: 3,
          label: "Node 3" },
        
        {
          id: 4,
          label: "Node 4" },
        
        {
          id: 5,
          label: "Node 5" }];
        
        
        
        var edge_init = [
        {
          from: 1,
          to: 3 },
        
        {
          from: 1,
          to: 2 },
        
        {
          from: 2,
          to: 4 },
        
        {
          from: 2,
          to: .........完整代码请登录后点击上方下载按钮下载查看