在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()設置力，可以設置這幾種力：

1. Centering：中心力，設置圖中心點位置。

2. Collision：節點碰撞作用力，.strength參數范圍為[0，1]。

3. Links：連線的作用力；.distance設置連線兩端節點的距離。

4. Many-Body：.strength的參數為正時，模擬重力，為負時，模擬電荷力；.distanceMax的參數設置最大距離。

Positioning：給定向某個方向的力。

通過simulation.on監聽力圖元素位置變化。

4.繪制svg

創建svg，在svg里創建g，將節點連線等內容放在g內。

1. select：選擇第一個對應的元素

2. selectAll：選擇所有對應的元素

3. append：創建元素

5.繪制連線

連線用貝塞爾曲線繪制：（M 起點X 起點y L 終點x 終點y）

6.繪制連線上的箭頭

1. viewport：可視區域

2. viewBox：實際大小，會自動縮放填充viewport
   

7.繪制節點

創建圓作為節點。

.call()調用拖拽函數。

8.節點名稱

因為文字在節點上層，如果沒有設置禁止鼠標事件，點擊文字將無法響應點擊節點的效果，也無法拖拽節點。

9.連線名稱

10.鼠標移到節點上有氣泡提示

11.監聽圖元素的位置變化

12.拖拽

13.縮放

三、其它效果

1.單擊節點時讓連接線加粗

2.被點擊的節點變色

四、在react中使用注意事項

在哪里構造圖 因為圖是動態的，如果渲染多次（render執行多次，渲染多次），不會覆蓋前面渲染的圖，反而會造成渲染多次，出現多個圖的現象。把構造圖的函數print()放到componentDidMount()內執行，則只會渲染一次。
對節點和連線數據進行增刪改操作后，需要再次調用print()函數，重新構造圖。

從哪里獲取數據 數據不從redux獲取，發送請求后callback直接獲取。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com