Vis.js 是一个动态的、基于浏览器的可视化库，可处理大量的动态数据并能与这些数据进行交互操作。
react中安装
network的方法
canvas方法
layout方法
options参数介绍：
var options = {
autoResize: true,//将自动检测其容器的大小，并相应地重新绘制，如果为false,可以使用：函数Rebug（）和SETSIZE（）重新调整容器的大小
height: '100%',//canvas的高
width: '100%',//canvas的高
clickToUse: false,//当配置点击，只有当激活时，它才会对鼠标和触摸事件做出反应
locale: 'en',//默认语言
locales: {//国际语言化
en: {
edit: 'Edit',
del: 'Delete selected',
//等等，可以进行多语言
}
},
configure: {},
groups: {},
physics:{},
edges: {
arrows: {
to: { enabled: true, scaleFactor: 1, type: 'arrow' } //箭头的显示
},
color: '#e6fffb',
font: '16px arial #13c2c2',
shadow: true // 阴影
},
layout: {
// hierarchical: true 是否显示方式为树形排列，和默认排列
},
nodes: {//这里设置为节点的设置
borderWidth: 1,//节点边框的宽度,单位为px
borderWidthSelected: 2,//节点被选中时边框的宽度，单位为px
fixed: false,
font: '18px arial #e6fffb',
scaling: {
label: true
},
shadow: true,
shape: 'dot',
font: {//设置字体
size: 16,
color: red,
},
hover: {//节点鼠标滑过时状态颜色
border: '#2B7CE9',
background: '#D2E5FF'
}
},
manipulation: {
enabled: true, //是否启用编辑
initiallyActive: false,
addNode: (data, callback) => {
//点击新增节点的事件
},
addEdge: (data, callback) => {
//点击连线的事件
},
editNode: (data, callback) => {
//编辑点击的事件
},
editEdge: (data, callback) => {
//编辑连线的事件
console.log(data);
callback(data);
},
deleteNode: (data, callback) => {
//删除节点的事件
console.log(data);
callback(data);
},
deleteEdge: (data, callback) => {
//删除连线的事件
console.log(data);
callback(data);
},
},
网友评论