在react中使用vis.js
import React from 'react';
import {message} from 'antd'
import vis from 'vis';
import {api as http} from '../../fetch';
let relation = { nodes: [], edges: [] }; //设置关联图的数据（nodes为节点、edges为关联线）
const visDate={ //后端返回的数据格式
nodes:[
{
image:IconDomain,
label:'域名',
size:25,
id:1,
},
{
image:IconDomain,
label:'域名',
size:25,
id:2,
}
],edges:[
{
arrows:'to',
from:'1',
to:'2'
}
]
};
class Vis extends React.Component{
constructor(props) {
super(props);
this.state = {
relation: { nodes: [], edges: [] },
nodeheight:window.screen.height-326 //设置关联图高度为浏览器的高低减去顶部的高度
};
};
componentDidMount(){
this.props.onRef(this)
let nodeheight=window.screen.height-326;
this.setnode()
}
setnode=(url,name)=>{ //请求后端接口
http.get(url,{params:{name:name}})
.then(response=>{
if(response.code===1){
response.data.nodes.map((val,index)=>{
val.image=IconDomain;
val.is_root?val.size=70:val.size=150;
})
visDate.nodes=response.data.nodes
visDate.edges=response.data.organ
let container = document.getElementById("graph");
relation = { nodes: new vis.DataSet(), edges: new vis.DataSet() };
let data = this.findNode(visDate);
let option = {
// autoResize: true,
width: '100%',
height: this.state.nodeheight+'px',
nodes: {
shape: 'box',
// shape: 'image',
level:11,
font: {
size: 18,
color: 'red',
// margin:100
},
borderWidth: 2,
// widthConstraint:{
// minimum:150,
// maximum:150
// },
widthConstraint:150, //设置节点的宽度，超出换行
fixed:false, //设置节点固定,如果为真，则节点不会沿X方向移动
mass:2,
chosen:false,
labelHighlightBold:false
// margin:10
// physics: true,
},
edges: {
smooth: {
enabled: false, //设置线是否可弯曲
type: 'dynamic'
},
color: "#fff",
arrows: {
to: {
scaleFactor: 0.6 //箭头大小
}
}
},
layout:{
randomSeed:1,//配置每次生成的节点位置都一样，参数为数字1、2等
// hierarchical: {
// direction: 'UD',//UD:上下 DU:下上 LR:左右 RL:右左
// sortMethod: 'directed'
// }, //层级结构显示}
},
physics: {
enabled: true, //节点不能重叠,整体图回弹效果
solver: 'forceAtlas2Based',
barnesHut: {
gravitationalConstant: -4000,
centralGravity: 0.3,
springLength: 120,
springConstant: 0.04,
damping: 0.09,
avoidOverlap: 0
}
},
interaction: {
hover: true,//鼠标移过后加粗该节点和连接线
// dragNodes:false,//是否能拖动节点
selectable:false,//是否可以点击选择
hover:false,
// chosen:false,
// labelHighlightBold:false
}
};
let network = new vis.Network(container, data, option);
}else{
message.error(response.msg)
}
}).catch(error=>{
console.log(error)
})
}
findNode = (data, name) => { //根据名称调用后端接口根据自己的业务来
data.nodes.map((value, index) => {
relation.nodes.update({
chosen:false,
widthConstraint:value.size,
id: value.id,
// image: value.image,
label: value.label,
size: value.size,
// level:Number(index),
shape:value.is_root?'circle':'box'}); //区分根节点和普通节点，根节点为圆形，普通节点为长方形
return relation
});
relation.edges.update(data.edges);
return relation
};
render(){
return(
<div style={{display:'flex'}}>
<div id="graph" style={{justifyContent:'center',width:'100%'}}>
</div>
</div>
)
}
}
export default Vis;
