cytoscape-react-fe-ml
Version:
206 lines (193 loc) • 7.64 kB
Markdown
# React图析组件(ReactCytoscape)
## 使用说明
## 安装
```bash
npm install cytoscape-react-fe-ml --save
```
## 引用
```js
import ReactCytoscape from 'cytoscape-react-fe-ml'
```
## Demo
[http://fe.mlamp.cn:3356/cytoscape](http://fe.mlamp.cn:3356/cytoscape)
## API说明
Property | Type | Default value | Description
:--- | :--- | :--- | :---
`width`|string||
`height`|string||
`layout`|object | string||布局，支持以下几种类型的布局方式："auto"-自动布局、"grid":-网格布局、"circle"-环形布局、"breadthfirst"-层次布局、"concentric"-同心轴布局
`pan`|shape||
`zoom`|number|1|画布的缩放系数
`boxSelect`|bool|false|是否开启区块选择，true-开启；false-不开启
`background`|string||背景
`hasNavigator`|bool|true|是否显示导航
`hasPanzoom`|bool|true|是否显示缩放控制条
`minZoom`|number|0.1|画布支持的最小缩放级别
`maxZoom`|number|6|画布支持的最大缩放级别
`zoomBig`|number|1|画布缩放等级分为四级，大、正常、小、微小。针对不同的等级可以配置不同的显示效果。zoomBig指定缩放等级为“大”的缩放级别的下限，超过此设置的缩放级别即为大
`zoomNormal`|number|0.5|zoomNormal指定缩放等级为“正常”的缩放级别的下限，超过此设置的缩放级别即为正常
`zoomSmall`|number|0.2|zoomSmall指定缩放等级为“小”的缩放级别的下限，超过此设置的缩放级别即为小，小于此设置的缩放级别为微小
`graphStyle`|object|null|图析画布的样式配置，可以通过selector来设置显示样式，请参考demo
`elements`|object||画布中的数据
`floatingLayer`|object|null|浮框
`floatingLayerConfig`|object|null|浮框的模板
`onChangeDisplay`|func||画布中的状态改变时的回调函数（例：布局变化、选中改变、位置改变等），参数chartData
`onLayoutStop`|func||布局结束时的回调函数
`onCxtTap`|func||点击右键时的回调函数
`onClick`|func||点击时的回调函数
`onDblClick`|func||点击双击时的回调函数
`afterRender`|func|null|图析组件渲染完成后的回调
`className`|string|null|样式名
`wheelSensitivity`|number|0.1|
`autoFit`|bool|false|
`fitMaxZoom`|number|1|
`onChangeZoom`|func||
`onNavigatorMouseUp`|func||
### elements 画布中的数据 可参考[Cytoscape.js的API文档](http://js.cytoscape.org/#core/initialisation)
```
{ //画布中的元素
nodes:[{ //点
data: { //数据
id: "n0", //id
name:'男性实体人', //name属性，默认的style中配置了此属性作为显示名
bgImages:{ //背景图片
image:'../../../../images/graphicon/entity-graphicon-human.svg', //背景图片，支持数组，可参考
positionX:'50%', //背景图片的x轴位置，多个用空格分隔
positionY:'50%' //背景图片的y轴位置，多个用空格分隔
}
},
position: { x: 100, y: 100 }, //位置
classes:"blue" //类
}, {
data: { id: "n1",name:'女性重点人', bgImages:{image:'../../../../images/graphicon/entity-graphicon-human.svg',positionX:'50%',positionY:'50%'}}, position: { x: 200, y: 200 },classes:'shape-hexagon red'
}],
edges:[{ //边
data: { //数据
id: "e0", //id
source: "n0", //源点的id
target: "n1" //目标点的id
},
classes:"directed" //类
}]
}
```
### graphStyle 画布样式 可参考[Cytoscape.js的API文档-Style](http://js.cytoscape.org/#style)
```
const defaultStyle = {
/*---------- 实体 ----------*/
'core': {
'selection-box-color': 'rgba(72, 133, 184, 0.2)'
},
/*----------- 点 -------------*/
'node': {
'width': '73px',
'height': '73px',
'shape': 'ellipse',
'border-width':'3px',
'border-opacity':1,
'border-color':'#3a9caa',
'background-width': function(ele){return ele.data('bgImages').width ? ele.data('bgImages').width : 'auto' },
'background-height': function(ele){return ele.data('bgImages').height ? ele.data('bgImages').height : 'auto' },
'background-color': '#3a9caa',
'background-opacity': 1,
'background-repeat': 'no-repeat',
'background-fit': function(ele){return ele.data('bgImages').fit ? ele.data('bgImages').fit : 'none' },
'background-image':'data(bgImages.image)',
'background-position-x': 'data(bgImages.positionX)',
'background-position-y': 'data(bgImages.positionY)',
'content': 'data(name)',
'color': '#707070',
'font-family': 'Microsoft Yahei',
'font-size': '12px',
'text-halign': 'center',
'text-valign': 'bottom',
'text-wrap': 'wrap',
'padding-bottom': '4px',
'padding-left': '4px',
'background-image-crossorigin':'anonymous',
'text-margin-y':'8px'
},
'node:locked': { //锁定
'border-color': "#666666"
},
'node:selected': { //选中
"border-color": "#fbba0a",
},
'node.shape-hexagon': { //六边形
'shape': 'polygon',
'shape-polygon-points': '0 1, 0.8660254037844386 0.5, 0.8660254037844386 -0.5, 0 -1, -0.8660254037844386 -0.5, -0.8660254037844386 0.5'
},
'node.shape-rectangle': { //正方形
'shape': 'roundrectangle',
'width': '50px',
'height': '50px',
},
'node.shape-rectangle:selected': {
'width':'53px',
'height':'53px',
},
/*---------- 关系 ----------*/
'edge': {
'width': '2px',
'line-color': '#9bb7f0',
'content': 'data(event)',
'color': '#707070',
'font-family': 'Microsoft Yahei',
'font-size': '12px',
'min-zoomed-font-size': '12px',
'edge-text-rotation': 'autorotate',
'curve-style': 'bezier',
'text-background-color': '#f6f7f9',
'text-background-opacity': '1',
'text-background-shape': 'roundrectangle'
},
'edge:selected': {
'line-color': '#fbba0a'
},
/*---------- zoom变化 ----------*/
'.hidtxt': {
'content': ''
},
'.showbigger': {
'content': function(ele){return ele.data('showbigger') || ele.data('name')}
},
'.showsmall':{
'content': ''
},
'node.showtiny:selected':{
'border-width':'10px',
},
//有向边
'edge.directed': {
'line-color': '#9bb7f0',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#9bb7f0'
},
'edge.directed:selected': {
'line-color': '#fbba0a',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#fbba0a'
},
'.hide': {
'opacity': '0'
}
};
```
### onChangeDisplay
参数
* chartData -- cytoscape的json方法返回的数据，排除掉style和boxSelectionEnabled
* operate -- 传入的graphData的operate
### onCxtTap
参数
* eventPosition - 事件的原始位置，相对于浏览器窗口
* position - 事件在画布中的位置
* eventFrom - 右键点击的对象。entity--点 relation--边 empty--空白处
## 开发说明
```bash
npm install
```
## 启动调试环境
windows操作系统使用git bash
```bash
npm run storybook
```