記錄一點碰到的問題和解決方案。感覺國內關於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.
v4版本
http://codepen.io/jingxiao/pe...
其他
D3.js 3.x和4.x版本api改動真心大，也沒有很多相關資料，還是要多看api吧