在資料視覺化領域，常常需要將資料按照一定的規則分布，使得資料展示直觀、清晰、一目了然。筆者在工程實踐時，遇到這樣乙個問題：如何使得具有多個關係聯絡的點邊圖按照樹形布局？
在查閱了大量國內外資料的基礎上，筆者找到了bill mill的一篇英文**：drawing presentable trees。
在這裡先簡單地描述一下演算法的大概思路：該演算法採用深度優先的方式遍歷整個多叉樹。第一步：如果是葉子節點則其x座標等於其左兄弟的x座標加上間距distance，如果是非葉子節點則其x座標等於其左兄弟的x座標加上間距distance，同時記錄下偏移量（x座標與子節點的中點之差）。第二步：將所有的子節點按父節點的偏移量移動。第三步：計算多叉樹的輪廓，如果輪廓值小於0則說明左右子樹存在重疊，將右子樹偏移該輪廓值。
此外，分享一下我的翻譯結果：
頁面布局之flex布局
flex布局 flex布局也叫作彈性盒子布局，可以簡便 完整 響應式的實現各種頁面布局，同時也支援所有的瀏覽器。父級元素設定css樣式為 display flex。內容的位置用justify content來控制，常用的屬性有 space between space around center le...
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...
前端布局之傳統布局
每個元素都有乙個預設的display屬性，但我們可以隨時重寫他。元素分為塊級元素和內聯 內聯級 元素，1 塊級元素的display預設為block,樣式為新開一行並盡量撐滿容器，能夠設定尺寸如寬度和高度 2 內聯元素的display 預設為 inline,樣式為嵌入在行內，不換行也不能設定尺寸 3 ...