d3 v4 穿透圖乾貨

最近用d3作了一個股權穿透圖，也許是本身太菜 ，查詢到的相關案例比較少，本身也走了不少彎路，谷歌的牆都快被我翻爛了。因此我以爲記錄一下這個稍微有點成就感的時刻。

相關知識點：

d3.tree – 建立一個新的整齊(同深度節點對齊)的樹佈局.

d3.zoom – 建立一個縮放交互.

d3.select – 從文檔中選取一個元素.

d3.hierarchy – 從給定的層次結構數據構造一個根節點併爲各個節點指定深度等屬性.

zoom.scaleExtent – 設置可縮放係數大小.

transform.translate – 根據指定的值平移當前座標變換.

transition.remove – 在過渡結束後移除選中的元素.

tree.nodeSize – 設置節點尺寸.

tree.separation – 設置兩個相鄰的節點之間的間距.

node.descendants – 從當前節點開始返回其後代節點數組.

selection.selectAll -從每一個被選中的元素中選擇多個後代元素.

selection.data – 將元素與數據綁定.

selection.enter – 獲取須要插入的選擇集(數據個數大於元素個數)的佔位符.

selection.exit – 獲取多餘的元素的選擇集(數據個數小於元素個數).

selection.on – 添加或移除事件監聽器.

selection.attr – 設置或獲取屬性.

selection.style – 獲取或設置樣式屬性.

selection.text – 設置或獲取文本內容.

selection.append – 建立、添加並返回一個新的元素.

selection.insert – 建立、插入並返回一個新的元素.

selection.remove – 從文檔中移除元素.

transition.duration - 指定每一個過渡元素的過渡時間(毫秒).

乾貨地址

www.gaorongjun.cn/index.php/2…

GitHub

github.com/grj1997/d3j…

寫得很差的地方還望指出，謝謝。