d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。
实现效果：连线有箭头，点击节点能改变该节点颜色和所连接的线的粗细，缩放、拖拽。
版本：4.X
npm安装：npm install d3
前端导入：import * as d3 from 'd3';
1.组件
<p className="theChart" id="theChart" ref="theChart"> </p>
整个图都将在p里绘制。
2.构造节点和连线
具体怎么构造依据你们的项目数据。
3.定义力模型
通过simulation.force()设置力，可以设置这几种力：
Centering：中心力，设置图中心点位置。
Collision：节点碰撞作用力，.strength参数范围为[0，1]。
Links：连线的作用力；.distance设置连线两端节点的距离。
Many-Body：.strength的参数为正时，模拟重力，为负时，模拟电荷力；.distanceMax的参数设置最大距离。
Positioning：给定向某个方向的力。
通过simulation.on监听力图元素位置变化。
4.绘制svg
创建svg，在svg里创建g，将节点连线等内容放在g内。
select：选择第一个对应的元素
selectAll：选择所有对应的元素
append：创建元素
5.绘制连线
连线用贝塞尔曲线绘制：（M 起点X 起点y L 终点x 终点y）
6.绘制连线上的箭头
viewport：可视区域
viewBox：实际大小，会自动缩放填充viewport
7.绘制节点
创建圆作为节点。
.call()调用拖拽函数。
8.节点名称
因为文字在节点上层，如果没有设置禁止鼠标事件，点击文字将无法响应点击节点的效果，也无法拖拽节点。
9.连线名称
10.鼠标移到节点上有气泡提示
11.监听图元素的位置变化
12.拖拽
13.缩放
1.单击节点时让连接线加粗
2.被点击的节点变色
在哪里构造图 因为图是动态的，如果渲染多次（render执行多次，渲染多次），不会覆盖前面渲染的图，反而会造成渲染多次，出现多个图的现象。把构造图的函数print()放到componentDidMount()内执行，则只会渲染一次。
对节点和连线数据进行增删改操作后，需要再次调用print()函数，重新构造图。
从哪里获取数据 数据不从redux获取，发送请求后callback直接获取。
下载本文