1、Vis-network

visjs 提供了一个网络视图模块，提供给我们绘制网络之间的各个点、线之间的关系，这个的话就比较类似于echarts的地图，在地图上打点画线的逻辑，区别在于使用visjs可以拖动节点的位置、以及visjs里面还有对物理引擎等的引入。

网络是一种可视化，用于显示由节点和边组成的网络和网络。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化可在任何现代浏览器上流畅运行，最多可容纳数千个节点和边。为了处理大量节点，Network 支持集群。

官网地址：https://visjs.org/index.html

2、vis-network 网络视图模块的基本使用

首先先安装依赖

npm install vis-network

安装之后在vue当中导入vis-network模块

  require("vis-network/dist/dist/vis-network.min.css");const vis = require("vis-network/dist/vis-network.min");

之后就是直接进行使用该模块进行绘制网络视图了。

查看基本的网络图的效果

这里的话这种代码的篇幅还是有点太长了，就不贴源码了，可在下方gitee当中查看(/src/components/vis/index.js)。其中options配置可以在对应的官方文档当中查看对应的配置是代表什么意思。

代码见 https://gitee.com/modify_lzq/web-lzq-echarts.git
官网英文文档 https://visjs.github.io/vis-network/docs/network/
中文文档 https://ame.cool/pages/a7d858/

3、vis-network 节点展示类型

在节点设置当中提供了一个节点的外观配置（shape）有两种类型的节点。

一类是标签在节点内部: ellipse(椭圆), circle(圆), database(数据库), box(盒子), text(文本)
另一类是标签在节点下面: image(图片), circularImage(圆图), diamond(菱形), dot(圆点), star(星型), triangle(三角形), triangleDown(倒三角), hexagon(六边形), square(正方形)和 icon(图标)。

这里就只对image对象进行说明：首先我们导入两张图片进来

  import iconA from './image/iconA.png'import iconB from './image/iconB.png'

在节点配置形状的时候，有一个image配置：当形状设置为image或circularImage时，此选项应为图像的URL。如果找不到图像，可以使用brokenimage选项。

但是这种只适用于整个关系图上的所有节点都是同意图标，但是我们如果要对图标进行区分呢？

我们可以给节点新增一个image属性，这样在进行渲染节点的时候会使用该属性作为节点的image图像。

let nodes = [{id: 1, x: 10, y: 10, label: '1', image: iconA }]

但是这样设置的话，在这个nodes节点对象当中每一个节点都应该加上这个image属性，否则会报错image must be defined for node type 'image' 必须为节点类型“图像”定义图像

4、vis-network 边颜色展示

对于边来说，我们可以在配置文档当中看到，可以对边的颜色进行设置，其中包含了：未选中或悬停在边上时的颜色、选中边时的颜色、鼠标悬停在边缘上时的颜色、颜色继承、边的不透明度。

            color: {color: "#000",highlight: "#000",hover: "#000",inherit: "from",opacity: 1,},

对于这些来说，我们可以直接在options下的edges下进行配置，这样的话还是和上面的节点展示一样，所有的线都是一样的，如何给他设置不一样的颜色以及其他的样式呢？在前面给节点设置不同的图片的时候，其实就可以看出一点端倪了，我们直接给他的节点对象加image属性，那么边对象能不能直接加color属性呢？

 let edges = [{id: 1, from: 1, to: 2, color:'red'}, {id: 2, from: 3, to: 2, color: {color:'red', highlight:'blue' } }]

本着举一反三的态度，我们来试一试。可以看到，效果出来了，由此我们可以发现当对于同一元素需要设置不同的样式或者配置时，我们可以通过修改其数据对象进行配置

5、vis-network 边类型展示

在边进行显示的时候，提供了一个smooth.type属性，可能的选项: dynamic（动态曲线）, continuous（连续）, discrete（离散）, diagonalCross（对角交叉）, straightCross（直线交叉）, horizontal（水平）, vertical（垂直）, curvedCW（顺时针曲线）, curvedCCW（逆时针曲线）, cubicBezier（贝塞尔曲线）。

这里我们主要要解决的是，当边的起始节点一致是存在多条边，但是只会在页面上绘制一条线的问题，在前文的基础上，看到这里其实或多或少的知道怎么去设置了。这里我们在options里面设置边的类型为直线，之后我们只需要判断那些边是重复（这里就不做判断了）。之后直接给重复的边的形状换成其他曲线类型即可。

 let edges = [{ id: 4, from: 1, to: 3, smooth: { type: "discrete" }}]

设置完成后查看效果：

Vue 使用 vis-network 绘制网络关系图相关推荐

python绘制网络关系图
import networkx as nx# 数据准备 G = nx.DiGraph() # 单边有向图G.add_edges_from([(1,2), ('x','y'), (2,3)...]) # ...
数据可视化—复杂网络关系图的绘制
数据可视化的含义将抽象概念进行形象性表达,将抽象语言进行具象图形可视的过程. 以数据为工具,以可视化为手段,去达到描述真实,探索世界的目的. 以数据的视角,去看待世界. 数据可视化其实是一个处于不断 ...
python绘制人际关系图_干货！利用Python绘制精美网络关系图
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者丨tan45du 来源丨袁厨的算法小屋(ID:t ...
干货！利用Python绘制精美网络关系图
点击上方蓝字关注我们最近发现一个特别好用的python库,能够绘制精美的关系图,俗话说有好东西要学会分享,所以袁厨就肝了这篇文章,大家可以参考一下. 一.概述 NetworkX是一个用python编 ...
tableau应用实战案例（三）-如何用Tableau制作网络关系图
前言唯一的一点点难度就在数据集的制作上,需要自己制作JSON文件,我用最简单的例子介绍: 数据生成网站: https://observablehq.com/@ladataviz/network-da ...
echarts绘制节点关系图
echarts绘制节点关系图 HTML代码 <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
便捷绘制人物关系图的软件分享
看阿加莎.东野圭吾的推理小说,或者<红楼梦><冰与火之歌>这类的史诗巨作,经常会被错综复杂的人物关系弄昏头脑. 面对这些情况,怎么办? 今天分享两款压箱底的工具,支持高效绘制人 ...
【图形基础篇】02 # 指令式绘图系统：如何用Canvas绘制层次关系图？
说明 [跟月影学可视化]学习笔记. 如何用 Canvas 绘制几何图形? 1. Canvas 元素和 2D 上下文 Canvas 元素上的 width 和 height 属性不等同于 Canvas 元 ...

Vue 使用 vis-network 绘制网络关系图