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