visjs实现带有弹性线条图标可拖动的关系图图表效果代码-html代码-BFW代码库

visjs实现带有弹性线条图标可拖动的关系图图表效果代码

代码语言：html

所属分类：选择器

代码描述：visjs实现带有弹性线条图标可拖动的关系图图表效果代码

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

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

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vis.4.21.0.css">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis.4.21.0.js"></script>

    <style>
        @import url(https://fonts.googleapis.com/css?family=Walter+Turncoat);
        
        #graph {
          width:900px;
          height:80vh;
          margin:auto;
        /*   background:#EEE;
          border:2px solid #DDD; */
        }
    </style>


</head>

<body>
    <div id="graph"></div>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
        
          var container = document.querySelector('#graph');
        
          var data = {
            nodes: [
            {
              id: 1,
              shape: 'image',
              image: '//repo.bfw.wiki/bfwrepo/icon/5d834e6d3b5e0.png',
              label: 'HTML5' },
        
            {
              id: 2,
              shape: 'image',
              image: '//repo.bfw.wiki/bfwrepo/icon/5d834e7ee3796.png',
              label: 'CSS3' },
        
            {
              id: 3,
              shape: 'image',
              image: '//repo.bfw.wiki/bfwrepo/icon/5d834eb5d1dba.png',
              label: 'JS' },
        
            {
              id: 4,
              shape: 'image',
              image: '//repo.bfw.wiki/bfwrepo/icon/5d834ee27fe7c.png',
              label: 'LESS' },
        
            {
              id: 5,
              shape: 'image',
              image: .........完整代码请登录后点击上方下载按钮下载查看