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…

写得很差的地方还望指出，谢谢。