React图析组件(ReactCytoscape)

使用说明

安装

npm install cytoscape-react-fe-ml --save

引用

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

elements 画布中的数据 可参考Cytoscape.js的API文档

    { //画布中的元素
        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

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--空白处

开发说明

npm install

启动调试环境

windows操作系统使用git bash

npm run storybook