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

代码语言:html

所属分类:图表

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

代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0