一、前言
? ? ? ? ? ? Echarts柳琢、HighCharts這兩個構(gòu)建可視化圖表庫相信大家都用過，它們對于一些柱狀圖润脸，折線圖柬脸，餅圖，熱力圖等都能很好的展現(xiàn)出來毙驯，所以前端展示圖表基本都用它們倒堕。
? ? ? ? ? ? 最近項目上有個需求，要求畫一個從左向右散開的思維導(dǎo)圖（單向樹狀圖）爆价。以前用過Echarts和HighCharts垦巴，所以這次想要嘗試一下用d3畫圖。大致樣式如下
二铭段、問題
? ? ? ? ? ? 具體怎么畫的在這里就不展示骤宣，可以參考d3里面的示例，里面有詳細代碼--d3樹狀圖示例地址序愚。對于數(shù)據(jù)量小的時候憔披，單頁面是可以完全展示的。但是爸吮，當(dāng)數(shù)據(jù)量大的時候芬膝，畫布展示不全，并且不出現(xiàn)滾動條拗胜。這當(dāng)然不算把一個完整的功能展示完全蔗候，于是開始了探索之路。
三埂软、解決svg不出現(xiàn)滾動條問題
? ? ? ? ? ? 首先想到的則是通過html+css給svg外層父元素加自適應(yīng)滾動條锈遥，通過css屬性實現(xiàn)
但這種方式不行纫事，主要不是overflow沒有生效，而是svg元素沒有被子元素撐開所灸，svg是給了viewBox屬性丽惶，其中寬高是設(shè)置成父元素的寬高的。
既然給父元素加overflow屬性不行爬立，就想給svg加此屬性钾唬，試了之后，依舊是不行侠驯。
????????????屢戰(zhàn)屢敗抡秆，就得屢敗屢戰(zhàn)了。首先吟策，不出現(xiàn)滾動條的原因是svg沒有被撐開儒士，而svg沒有被撐開的原因是設(shè)置了固定的寬高，所以這里的寬高不能設(shè)置成固定的檩坚。
? ? ? ? ? ? 不設(shè)定成固定的着撩，就得在mounted里面獲取svg里面的元素寬高然后賦值給svg。但是此項目的需求是匾委，每一下級數(shù)據(jù)是通過點擊事件動態(tài)獲取的拖叙，就是說下層數(shù)據(jù)是未知的，寬高也是未知的赂乐，不能在mounted里面就給svg寫死寬高薯鳍。應(yīng)該在update函數(shù)，即更新視圖的時候重新賦值svg寬高沪猴。
? ? ? ? ? ? 有了這個思路辐啄，現(xiàn)在要解決的就是svg的寬高有哪些元素決定，從上圖樣例展示可知寬由文字位置的x最大值決定运嗜，高由圓點y的最大值決定壶辜。這樣，每次update的時候計算寬高的最大值担租。
至此砸民，滾動條就能動態(tài)出現(xiàn)
完美！７芫取岭参！
