D3.V4(一)——可伸缩树图

D3.js绘制可伸缩树图步骤：

1. 定义树图布局方式

let tree = d3.tree()
    .size([height, width]);

2. 对原始数据进行处理

这里对根节点的位置进行了调整，heat_padding是图与边框的距离

let tree = d3.tree()
        .size([height, width]);

    let root = d3.hierarchy(treeData, function (d) {
        return d.children;
    });
    rootData = tree(root);
    root._x = height / 2;
    root._y = heat_padding.left;

3. 绘制树图

3.1 节点、连线绘制

整体思路是：首先将整体树图数据进行占位，然后进行对占位的节点进行绘制。圆滑的绘制是先把所有节点的位置定位在根节点出，然后采用动画过渡的方式移动到节点应该在的位置。节点之间的连线也是这样。

3.2 节点、连线删除

删除先是对数据进行处理，将收缩的节点的子节点删除，由于D3将数据与页面元素绑定在一起，对数据的操作可以看作是对页面元素的操作。然后就是常规的删除操作，这里就不在详述了。

来看整体的代码：

function update(source) {
    let svg = d3.select("#heat_svg");

    let nodes = rootData.descendants(),
        links = rootData.descendants().slice(1);

    nodes.forEac