react_compoent_dyzg_version
v1.0.11
Published
**关系图谱,力向导图,节点间的多重关系** ``` 这是我写的第一个组件,不好的地方还请多多指教,该组件可实现节点之间多关系连接且连接线不重叠 ```
Downloads
95
Maintainers
Readme
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} />
}