react_compoent_dyzg_version v1.0.11

Infomations

关系图谱，力向导图，节点间的多重关系

这是我写的第一个组件，不好的地方还请多多指教，该组件可实现节点之间多关系连接且连接线不重叠

Installation

Install the package in your project directory with:

// with npm
npm install react_compoent_dyzg_version --save-dev

Basic example

1.StyleParam和SymbolData是可选参数，styleParam中的参数可以动态地传值 例如只传入一个参数：styleParam ={symbolsize:100}
2.relationdata参数，里面的参数symbolsize，如果相同的id都设置了值，只会识别第一个
normalcolor参数同上
3.设置两个节点的多重关系时，value里面加上两组相同的数据，设置不一样的关系名称即可
两个节点间有多重关系时连接线只能是曲线，不然线就会重叠在一起，
当曲线是一个来（曲线程度-0.2），一个去的时候（曲线程度0.2）这样的数值时，连线也可能会重叠
4.symbolData参数是节点图标，可根据不同的节点设置不同的图标

import {GuanxiDemo} from 'react_compoent_dyzg_version'
 
let data =[
  {
	name:"test1",id:"t1",normalcolor:"#30b8c5",symbolsize:40,
	value:[
		{name:"test2",id:"t2",gxname:"测试1",normalcolor:"#2f7852",symbolsize:40},
		{name:"test3",id:"t3",gxname:"测试3",normalcolor:"#2f7852",symbolsize:40},
	]
  },
  {  
	name:"test2",id:"t2",normalcolor:"#30b8c5",symbolsize:40,
	value:[
		{name:"test3",id:"t3",gxname:"测试4",normalcolor:"#2f7852"},
		{name:"test3",id:"t3",gxname:"测试5",normalcolor:"#2f7852"}
	]
  }
]

let styleparam={
	//节点图标,图片传入格式为 "image://"+图片地址,或者path路径:"path://"
	symbol:"image://"+图片地址,
	symbolsize:80,//节点大小
	fontcolor:"#2c3239",//节点字体颜色
	fontsize:14,//节点字体大小
	linecolor:"#1887b3",//节点之间线条颜色
	opacity:1,//节点之间线条透明度
	linelightcolor:"#0e67b3",//线条高亮颜色
	repulsion:1500,//节点之间的斥力因子
	edgeLength:200,//两个节点之间的距离，这个距离也会受repulsion的影响
	layoutAnimation:true,//是否显示动画
	edgeSymbol:['', 'arrow'],//节点之间起始两端的图标
	strlen:3,//节点文字在第几个字的时候需要换行显示
	edgelabfontsize：12,//节点之间关系文字大小
	edgelabfontcolor:"#063c66",//节点之间关系文字颜色
}
 
let symboldata=[{name:"test1",symbolicon:"image://url1"},[{name:"test2",symbolicon:"image://url2"}]
 
function BasicExample() {
	return <GuanxiDemo  relationdata={data} styleparam={styleparam} symboldata={symboldata} />
}