gojs实现一个功能齐全的思维导图编辑效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：gojs实现一个功能齐全的思维导图编辑效果代码，鼠标滚轮缩放、单独按钮缩放。节点、链接样式。节点阴影。展开按钮样式。操作按钮包含SVG图标。单击节点、展开/折叠节点事件。默认展开某些节点。过滤节点:根据过滤器和父节点匹配,匹配的节点展开,其他隐藏。展开/折叠节点:不改变根位置。按"text"属性升序排序节点。默认调整到容器大小。不允许拖出容器外。按钮:展开全部。折叠全部。

代码标签： gojs 工厂加工工序流程示意图动画

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
    <style>
        .content {
          padding: 10px;
        }
        
        .diagram {
          background-color: white;
          border: solid 1px #B1B1B1; 
          width: 100%; 
          height: 500px;
        }
        
         /* remove blue frame from diagram */
        canvas {
          outline: none; 
        }
        
        .filter {
          position: absolute;
          z-index: 3;
          top: 20px;
          left: 20px;  
        }
        
        .zoom {
          color: #373737;
          width: 20px;
          position: absolute;
          z-index: 3;
          top: 20px;
          right: 15px;  
          cursor: pointer;
        }
        
        .fa-plus,
        .fa-minus {
          background: #E4E4E4;
        }
        
        .introduction {
          margin-top: 20px;
          padding: 10px;
        }
        
        .about {
          margin-bottom: 20px;
        }
    </style>



</head>

<body>
    <div class="content">
        <div id="myDiagram" class="diagram">
        </div>
        <div class="filter">
            <input type="text" id="filterText" />
            <button id="filterBtn">
      <i class="fas fa-search"></i>
    </button>
            <button id="expandBtn" title="Expand all nodes">
      <i class="fas fa-arrows-alt"></i>
    </button>
            <button id="collapseBtn" title="Collapse all nodes">
      <i class="fas fa-compress"></i>
    </button>
        </div>
        <div class="zoom">
            <i class="fas fa-plus" id="soomInBtn" title="zoom in"></i>
            <i class="fas fa-minus" id="soomOutBtn" title="zoom out"></i>
        </div>
    </div>
    <div class="introduction">
   
       此自定义图是使用 GoJs 制作的。
定制零件：
缩放鼠标滚轮。
用于缩放的单独按钮。
节点和链接的样式。
节点周围的阴影。
展开按钮样式。
带有包含 svg 图标的操作按钮的工具提示。
事件处理程序：单击节点、展开/折叠节点、添加/删除 btn 单击（请参阅控制台和警报）。
默认情况下，某些节点会展开。
蓝框将从主图和节点中删除。
筛选节点。如果筛选器不为空，则查找与筛选器及其所有直接父节点匹配的节点，然后展开这些节点。其他节点处于隐藏状态。
扩展/折叠节点时不会更改根位置。
节点按“text”属性升序排序。
默认情况下，将图表调整到其容器
不允许将图表拖到容器外
单击按钮时展开所有节点。
单击按钮时折叠所有节点。
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
    <script>
        (function(){
          var myDiagram;
          
          init();
          
          document.getElementById("soomInBtn").addEventListener("click", onZoomInClick);
          document.getElementById("soomOutBtn").addEventListener("click", onZoomOutClick);
          
          document.getElementById("filterBtn").addEventListener("click", onDoFilterClick);
          
          document.getElementById("expandBtn").addEventListener("click", onExpandAllClick);
          document.getElementById("collapseBtn").addEventListener("click", onCollapseAllClick);
        
          function init() {    
              var $ = go.GraphObject.make;  // for conciseness in defining templates
        
              myDiagram =
                $(go.Diagram, "myDiagram",  // must be the ID or reference to div
                  { 
                    initialContentAlignment: go.Spot.Center,
                    initialAutoScale: go.Diagram.Uniform, // fit to container by default
                    hoverDelay: 100,  // controls how long to wait motionless (msec) before showing Adornment
                    scrollMode: go.Diagram.DocumentScroll // do not allow to drag the diagram outside container
                  });
        
              myDiagram.toolManager.mouseWheelBehavior = go.ToolManager.WheelZoom; // Don't set Diagram.autoScale if you want the user to zoom the diagram.
              
              // define all of the gradient brushes
              var rootBrush = $(go.Brush, { color: "#6d7993" });
              var mainGroupBrush = $(go.Brush, { color: "#984b43" });
   .........完整代码请登录后点击上方下载按钮下载查看