在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;