d3-react-force

react版d3-force封装，简化d3-force配置。

安装

npm install d3-react-force
// yarn add d3-react-force

在线演示

https://yacan8.github.io/d3-react-force/

props参数

| 参数 | 说明 | 类型 | 默认值 | -----|-----|-----|------ | width | 容器宽度 | number | 800 | | height | 容器高度 | number | 800 | | nodeIdKey | 节点表示键值 | string | 'id' | | velocityDecay | 节点速度衰减系数，可理解为摩擦力，0~1之间 | number | 0.1 | | linkDistance | 连线长度 | number或(link) => number | 0.1 | | collideRadius | 节点碰撞半径 | number或(node) => number | 0 | | collideStrength| 节点碰撞强度，0~1之间 | number | 0.5 | | chargeStrength | 节点之间作用力，整数为引力，负数为斥力 | number | -10 | | staticLayout | 是否为静态布局（需要事先使用/simulation.js计算节点位置）| boolean | false | | XYCenter | 是否添加x、y作用力，居中效果，避免不连通图游离 | boolean或Object | {x: 0, y: 0} | | tick | 动画回调，每一帧 | function(alpah) | noop | | end | tick结束回调 | function | noop | | NodeElement | 节点 | React.Element或(node)=> React.Element | circle | | LinkElement | 边 | (link, addRef) => React.Element或object | link | | nodeClick | 节点点击事件 | function(node, d3.event) | noop | | nodeDbClick | 节点双击事件 | function(node, d3.event) | noop | | nodeMouseover | 节点mouseover事件 | function(node, d3.event) | noop | | nodeMouseout | 节点mouseout事件 | function(node, d3.event) | noop | | linkClick | 边点击事件 | function(link, d3.event) | noop | | linkMouseover | 边mouseover事件 | function(link, d3.event) | noop | | linkMouseout | 边mouseout事件 | function(link, d3.event) | noop | | dragEvent | 节点拖拽事件，start、isDrag、drag、end四个事件函数 isDrag判断是否拖拽，返回boolean | Object | {} | | zoomEvent | 缩放事件，start、isZoom、zoom、end四个事件函数，isZoom判断是否缩放，返回boolean | Object | {} |

API

通过ref方式获取组件示例，使用下列API：

adaption(animate)

视图居中，animate表示是否动画移动。

transform(translate, scale, animate)

缩放平移，translate为数组，数组第一个值为x偏移量，第二个值为y偏移量，scale为缩放比例，animate表示是否动画，默认不使用动画。如果不传任何参数，则返回偏移量与缩放比例。

forceEndTick()

强制停止tick动画动画。

addLayout(layout, options)

添加布局，layout分为圆形布局circle、阿基米德螺旋布局archimeddeanSpiral、栅格布局grid、分层布局dagre，options为布局参数，返回包含执行布局函数对象。如component.addLayout('circle').execute()，或者使用component.executeLayout('circle',{beforeExecute:() =>{}})

free()

布局释放，布局layout后节点x、y固定，使用free方法释放节点，变成力导向布局。

execute()

同步执行里导向布局至静止，注意：不会更新视图，需要手动执行tick更新视图。