Vis.js教程(二):基础关系图实现

首先引用所需要的cssjs文件

<link href="https://cdn.bootcdn.net/ajax/libs/vis-network/9.1.6/dist/dist/vis-network.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vis-network/9.1.6/standalone/umd/vis-network.min.js"></script>

接着添加一个div容器,用于展示关系图

<div id="mynetwork" style="width: 1000px;height: 800px;box-shadow: 10px 5px 5px lightgray;">

</div>

然后创建关系图的节点和边

 // create an array with nodes
    const nodes = new vis.DataSet([
        {id: 1, label: "菲尼克斯", color:'#F9D016'},
        {id: 2, label: "太阳", color:'#FF692D'},
        {id: 3, label: "布克", color:'#8B8DFE'},
        {id: 4, label: "杜兰特", color: '#8B8DFE'},
        {id: 5, label: "比尔", color: '#8B8DFE'},
    ]);

    // create an array with edges
    const edges = new vis.DataSet([
        {from: 1, to: 2},
        {from: 2, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5},
    ]);

最后,渲染节点和边到div上展示

// create a network
    const container = document.getElementById("mynetwork");
    const data = {
        nodes: nodes,
        edges: edges,
    };
    const options = {};
    const network = new vis.Network(container, data, options);

注意:这里的mynetwork要和上面添加的divid保持一致。

实现效果图

在这里插入图片描述
现在看起来所有的节点都是一样的,不容易区分,我们可以给相同类型的节点赋值相同的颜色。

只需给节点添加color属性即可

const nodes = new vis.DataSet([
        {id: 1, label: "菲尼克斯", color:'#D6AE10'},
        {id: 2, label: "太阳", color:'#FF692D'},
        {id: 3, label: "布克", color:'#8B8DFE'},
        {id: 4, label: "杜兰特", color: '#8B8DFE'},
        {id: 5, label: "比尔", color: '#8B8DFE'},
    ]);

修改之后效果图如下,这样看起来就比较直观了:
在这里插入图片描述

我们可以通过添加配置项options自定义关系图的样式

比如:修改节点的边的宽度、修改节点字体的颜色,只需添加如下代码即可:

const options = {
        nodes:{
            borderWidth: 2,
            font:{
                face: 'arial',
                color: '#fff',
                bold: true,
            }
        }
    };

修改效果如下:
在这里插入图片描述

备注:整体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/vis-network/9.1.6/dist/dist/vis-network.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vis-network/9.1.6/standalone/umd/vis-network.min.js"></script>
    <title>Dynamic Knowledge Graph</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="mynetwork" style="width: 1000px;height: 800px;box-shadow: 10px 5px 5px lightgray;">

</div>

<script>
    // create an array with nodes
    const nodes = new vis.DataSet([
        {id: 1, label: "菲尼克斯", color:'#D6AE10'},
        {id: 2, label: "太阳", color:'#FF692D'},
        {id: 3, label: "布克", color:'#8B8DFE'},
        {id: 4, label: "杜兰特", color: '#8B8DFE'},
        {id: 5, label: "比尔", color: '#8B8DFE'},
    ]);

    // create an array with edges
    const edges = new vis.DataSet([
        {from: 1, to: 2},
        {from: 2, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5},
    ]);

    // create a network
    const container = document.getElementById("mynetwork");
    const data = {
        nodes: nodes,
        edges: edges,
    };
    const options = {
        nodes:{
            borderWidth: 2,
            font:{
                face: 'arial',
                color: '#fff',
                bold: true,
            }
        }
    };
    const network = new vis.Network(container, data, options);
</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/223863.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python+requests+excel 接口测试

1、EXCEL文件接口保存方式&#xff0c;如图。 2、然后就是读取EXCEL文件中的数据方法&#xff0c;如下&#xff1a; 1 import xlrd2 3 4 class readExcel(object):5 def __init__(self, path):6 self.path path7 8 property9 def getSheet(self): 10 …

前端编码中快速填充内容--乱数假文

写前端页面的时候&#xff0c;如果要快速插入图片&#xff0c;可以使用 https://picsum.photos/ 详见笔者这篇博文&#xff1a; 工具网站&#xff1a;随机生成图片的网站-CSDN博客 可是&#xff0c;如果要快速填充文字内容该怎么做呢&#xff1f; 以前&#xff0c;我们都是…

【GAMES101】二维变换和齐次坐标

这几天都在抽空学OpenGL、敲leetcode和看games&#xff0c;这里留点笔记给以后复习 games101第一节课在吹水&#xff0c;第二节课讲了线性代数的入门知识&#xff0c;比较简单&#xff0c;这里稍微回顾一下重点&#xff0c;然后开始讲第三节课的二维变换和齐次坐标 目录 向量…

ACM32F42X系列芯片有何性能?为什么可以应用在工业控制 中等产品上

ACM32F42X 芯片的内核基于 ARMv8-M 架构&#xff0c;支持 Cortex-M33 和 Cortex-M4F 指令集。内核支持一 整套 DSP 指令用于数字信号处理&#xff0c;支持单精度 FPU 处理浮点数据&#xff0c;同时还支持 Memory Protection Unit &#xff08;MPU&#xff09;用于提升应用的安全…

C++[面向对象的程序设计]_基础入门(上)(万字总结)(建议收藏!!!)

目录 1. C基础入门 1.1 变量 1.2 常量 1.3 关键字 1.4 标识符命名规则 1.5 数据类型 1.5.1 整型 1.5.2 sizeof 关键字 1.5.3 实型&#xff08;浮点型&#xff09; 1.5.4 字符型 1.5.5 转义字符 1.5.6 字符串类型 1.5.7 布尔类型 1.5.8 数据的输入 1.6 运算符 …

ps快捷键和常见项目总结

处理以像素构成的位图的软件 Mac笔记本快捷键&#xff1a; 打开文件&#xff1a;commandO 图像缩放&#xff1a;command 多个文件切换&#xff1a;同一桌面中&#xff1a;command (英文状态下输入) 切换屏幕模式&#xff1a;F,全屏模式下Tab键可进行切换 首选项—性能&a…

python/matlab图像去雾/去雨综述

图像去雾和去雨是计算机视觉领域的两个重要任务&#xff0c;旨在提高图像质量和可视化效果。本文将综述图像去雾和去雨的算法、理论以及相关项目代码示例。 一、图像去雾算法 基于暗通道先验的方法&#xff1a; 这是广泛应用于图像去雾的经典算法之一。该方法基于一个观察&…

SpringMVC修炼之旅(2)基础入门

一、第一个程序 1.1环境配置 略 1.2代码实现 package com.itheima.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;//定义…

MySQL联合查询、最左匹配、范围查询导致失效

服务器版本 客户端&#xff1a;navicat premium16.0.11 联合索引 假设有如下表 联合索引就是同时把多列设成索引&#xff0c;如(empno&#xff0c;ename)在查询的时候就会先按照empno进行查询&#xff0c;再按照ename进行查询其中empno是全局有序&#xff0c;ename是局部有…

【银行测试】支付类测试关注点与异常点+支付平台...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、支付类的测试关…

Django回顾 - 6 Ajax

【1】Ajax 定义&#xff1a; 异步Javscript和XML 作用&#xff1a; Javascript语言与服务器(django)进行异步交互&#xff0c;传输的数据为XML&#xff08;当然&#xff0c;传输的数据不只是XML,现在更多使用json数据&#xff09; 同步交互和异步交互&#xff1a; 1、同步交互&…

Web server failed to start. Port 8081 was already in use.

netstat -aon|findstr "8081" taskkill /pid 20824 /f

现代雷达车载应用——第2章 汽车雷达系统原理 2.1节

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 2.1 基本雷达功能 雷达系统通过天线或天线阵列向空间辐射电磁能量。辐射的电磁能量“照亮”周围的目标。“被照亮”的目标拦截一些辐射能量&#xff0…

开发步骤、Java开发工具

目录 一、开发步骤 二、Java开发工具 JDK安装完毕&#xff0c;我们就可以开始开发第一个Java程序了&#xff0c;习惯性的成为HelloWorld。 一、开发步骤 Java程序开发三步骤&#xff1a;编写、编译、运行 -将Java代码编写到扩展名为.java的源文件中 -通过javac.exe命令对…

Kontakt v7.7.2(音频采样器)

Native Instruments Kontakt 7是一款强大的软件采样器&#xff0c;它允许用户从各种来源采样音频并进行编辑和处理。它包含大量预设采样库&#xff0c;包括乐器、合成器、鼓组和声音效果等。此外&#xff0c;Kontakt 7还允许用户创建自己的采样库&#xff0c;以便根据自己的需要…

CTF特训日记day7

复现华为杯研究生国赛的adv_lua题目 从题目描述来看&#xff0c;漏洞应该和bytearray相关 用IDA逆向一下然后直接字符串搜索bytearray 只有这里有bytearray字样&#xff0c;继续查找交叉引用&#xff1a; 可以看到一系列方法&#xff0c;显然都是为bytearray所注册的吗&am…

Xilinx FPGA平台DDR3设计详解(三):DDR3 介绍

本文介绍一下常用的存储芯片DDR3&#xff0c;包括DDR3的芯片型号识别、DDR3芯片命名、DDR3的基本结构等知识&#xff0c;为后续掌握FPGA DDR3的读写控制打下坚实基础。 一、DDR3芯片型​号 电路板上的镁光DDR3芯片上没有具体的型号名。 ​如果想知道具体的DDR3芯片型号&#…

电力智慧运维系统

电力智慧运维系统是以提高用户侧电力运行安全&#xff0c;降低运维成本为目标&#xff1b;采用智能化运维管理工具—“电易云”&#xff0c;帮助企业建立电力运维体系全方位的信息化、数字化平台&#xff0c;实现设备运行的数字化在线监控与线下维护处理的有机融合&#xff0c;…

【海思SS528 | VO】MPP媒体处理软件V5.0 | VO模块编程总结

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

Netty中Channel的isWritable方法理解

目录 初见 深入 需要注意 对待超SIZE情况开源项目怎么做 1、seata中 2、SUMMER中 3、一些资料中 总结 初见 以下是包中注释 Returns true if and only if the I/O thread will perform the requested write operation immediately. Any write requests made when t…