D3.js 力導向圖來處理拓撲圖

記錄一點碰到的問題和解決方案。感受國內關於D3.js 4.0版本的相關資料仍是少。

力導向圖佈局

D3一種佈局的方式，能夠將你nodes links的節點數據轉換成能夠繪製的座標點數據，而後經過svg展示出來，畫拓撲圖中用到。

經過fixed屬性來固定節點

https://bl.ocks.org/mbostock/...

上面做者的demo(d3.js v4)。
力導向圖的幾個特徵

• 節點之間的相互做用力的存在 因此節點不能重合，而後節點拖拽的過程當中會影響到其餘的節點

• 拖拽的過程 節點之間的線段長度不變，會會彈回去

可是對於拓撲圖來講，這兩點會有問題，並不須要這樣的體驗，簡單來講，節點固定後，拖拽不影響其餘節點的位置，節點拖拽鏈路長度要變更。

找了個做者的demo
sticky force layout
這是D3.js v3版本的實現方法
主要方法就是將節點數據

d.fixed = true;

一開始沒有仔細看v4版本的API 想固然覺得也是這樣去作的，嘗試了很久沒成功。
v4版本的api對fixed節點的規定是 若是節點數據(d) 有fx fy兩個值不爲null，那麼就是固定節點，unfix固定節點的方法就是 設置fx fy=null。

To fix a node in a given position, you may specify two additional properties:
fx - the node’s fixed x-position
fy - the node’s fixed y-position
At the end of each tick, after the application of any forces, a node with a defined node.fx has node.x reset to this value and node.vx set to zero; likewise, a node with a defined node.fy has node.y reset to this value and node.vy set to zero. To unfix a node that was previously fixed, set node.fx and node.fy to null, or delete these properties.

simulation_nodes

v4版本
http://codepen.io/jingxiao/pe...

其餘

D3.js 3.x和4.x版本api改動真心大，也沒有不少相關資料，仍是要多看api吧