D3-force-chart NPM

∫基于 d3 实现的 react 力导向图插件

d3-force-chart 插件介绍

基于 d3.js 封装一套力导向图的 react 插件, 可缩放，可拖动。可点击节点动态生成子节点。
提供力导向图相关参数，可自定义不同效果的力导向图。
提供点击事件，提供力导向图数据更新方法，可点击节点动态生成子节点。

使用方法

安装 npm i d3-force-chart
引入 import D3ForceChart from 'd3-force-chart';
使用 <D3ForceChart forceData={newNodes:..., newEdges:...} ...其他参数 />

相关 API

HEIGHT/WIDTH -> type:Number
图表的高宽 *默认 HEIGHT = window.innerWidth / HEIGHT = window.innerHeight
ScaleExtent -> type:Array
缩放比例 *默认 ScaleExtent = 1 / 10, 10
CenterLocation -> type:Object
图表坐标中心 *默认 CenterLocation ={ x:WIDTH/2, y:HEIGHT/2} -> 即屏幕可视区域的中心点
TextLocation -> type: Object
文字标签的位置 *默认 TextLocation = { dx:20, dy:8 }
Strength -> type: Number
节点间的作用力 *默认 Strength = -380
DistanceMax -> type: Number
节点间的最大距离 *默认 DistanceMax = -300
StrokeWidth -> type: Number
节点间连线的宽度 *默认 StrokeWidth = 1
DragStartAlphaTarget / DragEndAlphaTarget -> type: Number
开始/结束拖拽系数 *默认 DragStartAlphaTarget = 0.5 / DragEndAlphaTarget = 0
ImageSizeLocation -> type: Object
节点图片的大小和位置 *默认 ImageSizeLocation = { x:-15px, y:-15px, w:30px, h:30px }
x ：图片横坐标， y ：图片竖坐标， w ：图片宽度， h ：图片高度
ForceData -> type: Object
力导向图的真实数据
格式 [nodes: {"name":"","url":"*"}, edges: {"source":1,"target":0} ]
*默认不传递 forceData 参数即为默认数据
OnUpdateData -> type: Function
节点点击事件 *参数 ( d, i, nodes, edges, restart )
d: 当前点击的子节点
i: 当前点击的子节点的下表
nodes: 点击前数据的所有节点 node
edges: 点击前数据的所有节点间的关系
restart: 图表更新方法在原有数据基础上添加新数据之后再调用此方法更新图表
OnNodesClick -> type: Boolen
不管是模拟数据节点还是真实数据节点在默认情况下每个节点都是有点击事件的
传递 OnNodesClick 为 true 后可取消节点的点击事件 *默认 OnNodesClick = { false }
OnLongPressDown -> type: Function
节点长按事件 *参数 ( d )
d: 当前长按的子节点