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 nodesconst 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 edgesconst edges = new vis.DataSet([{from: 1, to: 2},{from: 2, to: 3},{from: 2, to: 4},{from: 2, to: 5},]);

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

// create a networkconst 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 nodesconst 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 edgesconst edges = new vis.DataSet([{from: 1, to: 2},{from: 2, to: 3},{from: 2, to: 4},{from: 2, to: 5},]);// create a networkconst 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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Java学生课外活动管理系统

基于Java学生课外活动管理系统 功能需求 1、活动信息录入&#xff1a;系统需要提供录入各类课外活动信息的功能&#xff0c;包括但不限于活动名称、活动类别、活动时间、活动地点等信息。此外&#xff0c;系统还应支持对活动信息进行修改、删除和查询的操作。 2、学生报名管…

go-zero 开发之安装 goctl 及 go-zero 开发依赖

安装 goctl go 版本在 1.16 及以后执行&#xff1a; GO111MODULEon&&go install github.com/zeromicro/go-zero/tools/goctllatestgo 版本在 1.16 之前执行&#xff1a; GO111MODULEon&&go get -u github.com/zeromicro/go-zero/tools/goctllatest验证是否安…

Java微服务框架 HP-SOA 1.0.5 — 完整支持 Spring Cloud 和 Dubbo

HP-SOA 功能完备&#xff0c;简单易用&#xff0c;高度可扩展的Java微服务框架。 项目主页 : https://www.oschina.net/p/hp-soa下载地址 : https://github.com/ldcsaa/hp-soa开发文档 : https://gitee.com/ldcsaa/hp-soa/blob/master/README.mdQQ Group: 44636872, 66390394…

IDEA解决Git冲突详解

目录 前言&#xff1a; 何为冲突 冲突演示 IDEA冲突解决 小结&#xff1a; 前言&#xff1a; 相信大家多多少少都有了解和使用过Git&#xff0c;作为Java程序员idea可谓是无敌的存在了&#xff0c;那么如何使用idea解决Git冲突呢&#xff1f;不瞒大家前段时间在公司把同事…

Spatial Data Analysis(四):空间自相关示例

Spatial Data Analysis&#xff08;四&#xff09;&#xff1a;空间自相关示例 空间自相关是地理信息科学&#xff08;GIS&#xff09;和空间统计学中的重要概念之一&#xff0c;用于研究地理空间上的数据变异性和相关性。空间自相关分析的目标是探讨地理空间中的现象是否呈现…

【重点】【二叉树】543. 二叉树的直径

题目 法1:自己想的垃圾算法 class Solution {public int diameterOfBinaryTree(TreeNode root) {if (root null) {return 0;}int curDim maxDepth(root.left) maxDepth(root.right);int leftDim diameterOfBinaryTree(root.left);int rightDim diameterOfBinaryTree(roo…

本地缓存LoadingCache使用【详解】

一、背景 最近来到了新的团队&#xff0c;发现了一个好用的东西-Guava的LoadingCache本地缓存&#xff0c;我们都知道Guava是一个非常好用的工具集合&#xff0c;这次认识到了一个非常好用的本地缓存-LoadingCache。 我们知道缓存有多种类型&#xff0c;比如常见的分布式缓存、…

Dubbo(二)dubbo调用关系

节点角色说明Provider暴漏服务的额提供方&#xff08;洗浴中心&#xff09;Consumer调用远程服务的消费方&#xff08;客人&#xff09;Registry服务注册与发现的注册中心&#xff08;便民服务中心&#xff0c;所有的饭店娱乐场所都在本中心注册&#xff09;Monitor监控统计服务…

仓库管理应该用ERP系统还是WMS仓储管理系统

WMS仓储管理系统和ERP企业管理系统中的仓储管理模块在功能上具有相似性&#xff0c;但在实际应用中却存在着明显的区别。这些区别对于想要全面构建信息化体系的企业来说&#xff0c;尤其是仓库的系统化管理方面&#xff0c;具有重要的影响。 WMS是一种专注于仓库管理的系统&am…

【go语言开发】loglus日志框架的使用

本文将简单介绍loglus框架的基本使用&#xff0c;并给出demo 文章目录 前言Loglus常见用法自定义日志级别使用字段钩子输出到多个位置使用钩子实现自定义日志处理demo 前言 Logrus 是一个用于 Go 语言的结构化日志框架&#xff0c;它提供了丰富的日志级别、钩子和格式化选项。…

德迅云安全的日常网站安全性措施、以及更多网站安全工具的推荐与使用。

要确保网站的安全性&#xff0c;可以采取以下措施&#xff1a; 更新和维护&#xff1a;定期更新网站的操作系统、应用程序和插件&#xff0c;确保使用的是最新版本&#xff0c;以修复已知的安全漏洞。 强密码策略&#xff1a;使用强密码&#xff0c;包含字母、数字和特殊字符的…

navicat premium 历史版本下载地址

navicat贴心地给大家准备了一致的下载地址&#xff1a; 只是没有把旧版本的链接放出来而已。 链接的格式 &#xff1a; 前缀版本类型语言位数 前缀&#xff1a;http:/download.navicat.com/download/navicat 版本&#xff1a;三位数&#xff0c;前两位是大版本&#xff0c;后…

使用Pytoch实现Opencv warpAffine方法

随着深度学习的不断发展&#xff0c;GPU/NPU的算力也越来越强&#xff0c;对于一些传统CV计算也希望能够直接在GPU/NPU上进行&#xff0c;例如Opencv的warpAffine方法。Opencv的warpAffine的功能主要是做仿射变换&#xff0c;如果不了解仿射变换的请自行了解。由于Pytorch的图像…

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

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

flink中处理kafka分区的消息顺序

背景 kafka分区的消息是有序的&#xff0c;那么flink在消费kafka分区的时候消息的顺序是怎么样的呢&#xff1f;还能保持这个有序性吗&#xff0c;本文就来记录下 flink消费kafka分区的顺序性 从上图可知&#xff0c;flink的转换算子比如map&#xff0c;flatMap&#xff0c;f…

IntelliJ IDEA 之初体验

文章目录 第一步&#xff1a;下载与安装 IntelliJ IDEA1&#xff09;官网下载2&#xff09;选择那种安装包3&#xff09;开始下载4&#xff09;解压 第二步&#xff1a;启动 IntelliJ IDEA第三步&#xff1a;创建第一个 Java 项目第四步&#xff1a;运行第一个 Java 程序1&…

代理服务器的IP和端口是什么意思?

代理服务器的地址和端口&#xff1a;基础概念解析 如果我们将其与在互联网发明之前我们的老一辈之间用于交流的经典书信进行类比&#xff0c;那么地址就相当于信封上的寄件人地址&#xff0c;而端口就相当于收信人地址。然而&#xff0c;与传统信件不同&#xff0c;这里需要确切…

【力扣100】 3.最长连续序列

题目链接 class Solution:def longestConsecutive(self, nums: List[int]) -> int:# 先排序&#xff0c;然后遍历元素&#xff0c;r1&#xff0c;然后r在max(temp&#xff0c;r)选择最大的if len(nums)0:return 0# 先set再排序# my_setset(nums)# my_listlist(set(nums))my…

设计一算法,对单链表实现就地逆置

对单链表逆置&#xff0c;要联想到单链表的头插性质 举个例子&#xff1a;现在有一个空链表&#xff0c;我们依次对它进行头插123 那么形成的链表是321&#xff0c;这样就形成了逆置 //单链表就地逆置 //思路&#xff1a;把原表接到一个新表上&#xff0c;然后对原表进行头插 …

【Linux】冯诺依曼体系结构(硬件)、操作系统(软件)、系统调用和库函数 --- 概念篇

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和Linux还有算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 …