接到一個臨時任務：
終端里面要加入企業圖譜的功能，用於更直觀的展示與查詢企業相關的維度信息，（當然最主要的原因還是競品做了這個功能...[攤手.jpg]）
看完產品的需求文檔之后還是應該研究一下競品（看看是從哪抄來的），畢竟產品的需求一般都不包含清晰完整的交互細節。
對標的競品長這樣：
ok,知道從哪抄的就好辦了，打開控制台大致看一下他們的技術實現，然后search一下網上的實現類似圖譜的方案，基於低學習成本的策略，最終選擇相對比較靈活的D3js的tree布局方式來實現。
接下來是對照着D3的官方文檔和實例，手把手擼出來一個demon,實現基礎的布局、動畫、展開折疊等效果。
個人覺得d3的api還是十分強大的，特別是布局(layout)的api，例如tree,pack等，面對產品經理的特殊展示需求（不知道從哪個犄角旮旯里抄過來的），直接調用d3的布局api，往往能節省很多的時間，當然d3只是對數據進行處理，生成一份布局好的數據格式，你可以用任何dom結構來呈現它，不局限於svg或者canvas。
例如上次看到一個產品讓我們組的一個同事做一個環形布局，去描述用戶畫像（大概就是用戶的訪問路徑），如果直接用普通的dom布局需要考慮的細節會特別多，兼容性可能也比較難搞，這個時候如果可以用d3的
這個布局，肯定能夠事半功倍。
言歸正傳，用上了d3的tree布局，整個的框架就有了，下面要解決的就是交互相關的問題，想要達到可以和競品媲美的交互體驗，還有很大的提升空間。
因為整個圖譜是可以無限展開的（如果庫表里有數據的情況下），又考慮到接口的承受能力，默認只會展示兩層的數據，每次點擊新節點的加號執行展開操作，都需要重新請求數據，拿過來拼接數據、處理數據，然后布局繪圖。折疊同樣也需要重組數據重繪，不同的是把數據隱藏起來，下次再展開的時候不用再去請求接口數據，有效減輕服務器帶寬的壓力。
最后的效果是這個樣子的：
最后一個比較棘手的問題，應該就是重繪之后的視野移動了，需要將當前點擊的節點移動到視野中央，但是我們只知道點擊之前點擊的位置，點擊之后樹的結構和節點數量發生了變化，如果按照變化之前的位置去移動，必定會造成移動位置的不准確和視野偏移。為此還吃了個bug，所以印象十分深刻。
為了解決這個問題，我能想到的辦法就是為每個節點生成唯一的id，點擊記錄下來當前的id，然后等繪制完成或者數據處理完成（d3計算完位置）之后，再次查詢到記錄id的當前位置，將該節點移動到視野的正中央，如此這般，基本實現了競品所有的交互功能。
除此之外，還有兩個points需要提一下：
其一是鏈接線的繪制，我這里是自定義的線，默認的好像是貝賽爾曲線，我這里運用svg的基礎畫線方式Path（M，H, S,L,V,A,Q,C這樣的基礎屬性）。
其二是節點上的rect長度的計算，因為d3自身是基於節點point的計算，不會把節點上的文字的長度計算進去，不加處理的話會造成節點和rect的重疊問題。所以我們需要在繪制圖像之前根據當前layer的最長文字長度來確定下一層級節點的開始位置，我是寫了一個方法來專門計算當前層級最大的長度，來保證整個布局不會出現重疊現象的。
由於公司內網網關的原因，源碼搞不出來。有疑問需要支持的話可以聯系。