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

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

$3

`
{ //画布中的元素
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" //类
}]
}
`

$3


`
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'
}
};
`

$3

参数
* chartData -- cytoscape的json方法返回的数据，排除掉style和boxSelectionEnabled
* operate -- 传入的graphData的operate

$3

参数
* eventPosition - 事件的原始位置，相对于浏览器窗口
* position - 事件在画布中的位置
* eventFrom - 右键点击的对象。entity--点 relation--边 empty--空白处

开发说明

`bash
npm install
`

启动调试环境

windows操作系统使用git bash

`bash
npm run storybook
``