visjs实现网络拓扑IP地址图效果代码-html代码-BFW代码库

visjs实现网络拓扑IP地址图效果代码

代码语言：html

所属分类：图表

代码描述：visjs实现网络拓扑IP地址图效果代码

下面为部分代码预览，完整代码请点击下载或在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>
#mynetwork {
  width: 100%;
  height: 100vh;
  border: 1px solid lightgray;
}

.vis-configuration-wrapper {
/*   width: 280px;
  float: right;
  position: absolute;
  right: 0;
  top: 0;
  max-height: 100vh;
  overflow: auto;
  padding: 10px;
  box-sizing: border-box; */
}
</style>

</head>

<body>
  <div id="mynetwork"></div>
<button id="js-get-position">Get position</button>

      <script >
// https://stackoverflow.com/questions/32403578/stop-vis-js-physics-after-nodes-load-but-allow-drag-able-nodes
// Nodes
var nodeList = [
{
  id: 1,
  label: "sg. l ab. ibc21. co. jp",
  shape: "circularImage",
  image: "//repo.bfw.wiki/bfwrepo/icon/625b4cfe3a2ae.png",
  color:
  {
    background: "#fff",
    border: '#fff' },

  borderWidth: 0,
  size: 15,
  x: -318,
  y: -161 },

{
  id: 2,
  label: "192.168.100.8/30",
  x: -154,
  y: -149 },

{
  id: 3,
  label: "sg. l ab. ibc21. co. jp",
  shape: "hexagon",
  color:
  {
    background: "#fff" },

  x: -72,
  y: -6 },

{
  id: 4,
  label: "192.168.100.8/30",
  x: -167,
  y: 128 },

{
  id: 5,
  label: "sg. l ab. ibc21. co. jp",
  shape: "hexagon",
  color:
  {
    background: "#fff" },

  x: -332,
  y: 123 },

{
  id: 6,
  label: "192.168.100.8/30",
  x: -408,
  y: -23 },

{
  id: 7,
  label: "192.168.100.8/30",
  color:
  {
    border: "#feef50",
    background: "#fffdd9" },

  x: 94,
  y: -583 },

{
  id: 8,
  label: "192.168.100.8/30",
  color:
  {
    border: "#f5b19b",
    background: "#fcede9" },

  x: 72,
  y: 371 },

{
  id: 9,
  label: "Sub dc",
  shape: "hexagon",
  color:
  {
    background: "#fff" },

  x: 424,
  y: 68 },

{
  id: 10,
  label: "192.168.10.........完整代码请登录后点击上方下载按钮下载查看