# React Components

## ReactCytoscape

React封装的cytoscape.js组件

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

<sub>Source: **src\index.jsx**</sub>

-----

<sub>Documentation generated using **React Doc Creator v0.0.8**</sub>