当前位置：Gxlcms > JavaScript > 在react中搭建d3力导向图方法分享

在react中搭建d3力导向图方法分享

时间：2021-07-01 10:21:17 帮助过：3人阅读

本文主要介绍了如何在react中搭建d3力导向图，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家，

D3js力导向图搭建

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.被点击的节点变色

四、在react中使用注意事项

在哪里构造图 因为图是动态的，如果渲染多次（render执行多次，渲染多次），不会覆盖前面渲染的图，反而会造成渲染多次，出现多个图的现象。把构造图的函数print()放到componentDidMount()内执行，则只会渲染一次。
对节点和连线数据进行增删改操作后，需要再次调用print()函数，重新构造图。

从哪里获取数据 数据不从redux获取，发送请求后callback直接获取。