前言

本文总结了d3.js中绘制树图的基本过程

完整代码：

GitHub地址
 CodePen地址

原理阐述

其实用d3.js构建树图非常简单，主要用到的是如下几个API

const hierarchyData = d3.hierarchy(data) - 将层级数据进一步精细化
const treeLayout = d3.tree() - 获取layout
const nodesData = treeLayout( hierarchyData ) - 通过layout获得易于d3方便绘图的数据

以上的api会在后文进行解释，如果读者对**d3布局(layout)**不了解可以参阅本人之前的总结：d3.js 布局(layout)是什么，也欢迎大家提出宝贵建议

以下流程图是对整个逻辑的简单展示

接下来会分布对代码进行说明

代码

初始标签及数据

<svg class="chart">

</svg>

const data = {
    name: "root",
    children: [
        {
            name: "二级节点1",
            children: [
                {
                    name: "A",
                    value: "叶子节点"
                },
                {
                    name: "B",
                    value: "叶子节点"
                }
            ]
        },
        {
            name: "二级节点2",
            children: [
                {
                    name: "C",
                    value: "叶子节点"
                },
                {
                    name: "D",
                    value: "叶子节点"
                }
            ]
        }
    ]
};

这是本次实验的初始数据，以root为根节点，children中放置子节点，子节点也有其后裔节点。此例中以三层为例。
后文中，d3.hierarchy函数默认处理数据中节点属性名为children，此处我们直接将子节点数组属性设置为children

接下来是设置宽度，高度，及g容器

const width = 1366;
const height = 580;
const svg = d3.select('.chart')
    .attr('width', width)
    .attr('height', height);
const g = svg.append('g').attr('transform', 'translate(0, 20)');

获得进一步层级化的数据

const hierarchyData = d3.hierarchy(data);
console.log("——————d3.hierarchy(data)——————");
console.log(hierarchyData);

我们可以看到，相对初始数据，经过d3.hierarchy处理后，节点的数据类型变为了Node(Object)，同时返回了相应的depth及height

接下来我们获取layout

获取layout

const treeLayout = d3.tree()
    .size([width, height - 30])  //设置tree的大小
    .separation((a, b) => {      // 根据是否为同一父节点设置节点距离比例
        return a.parent === b.parent ? 1 : 2;
    });
console.log("——————treeLayout——————");
console.log(treeLayout);

我们可以看到d3.tree()返回的就是一个函数

接下来就是把hierarchyData交给treeLayout处理获得便于绘图的数据了

使用treeLayout获取易于绘图的数据

const nodesData = treeLayout(hierarchyData);
console.log("——————nodesData——————");
console.log(nodesData);

我们可以看到经过treeLayout处理返回的数据多了x、y属性，它们定位了在图中的位置，绘图时我们会用到它们

同时也注意layout函数并不是纯函数，由于是引用，原先的hierarchyData数据也变得如上，大家可以在控制台中自行查看

开始绘图

现在我们已经有定位了位置的数据了，接下来要做的非常简单，就是根据这些x，y来画线，画节点

先画线

const links = g.selectAll('.links')
    .data(nodesData.descendants().slice(1)) //nodesData.descendants()返回所有节点的数据，利于我们绑定数据，slcie(1)截取root后的全部节点，防止重绘
    .enter().append('path') //用path画线
    .attr('fill', 'none')
    .attr('stroke', '#313131')
    .attr('stroke-width', 2)
    .attr('d', (d) => {//通过三次贝塞尔曲线设置连线的弯曲程度。M：move to，即到控制点 C后设置两个控制点及终点
        return `
        M${d.x},${d.y}
        C${d.x},${(d.y + d.parent.y) / 2}
        ${d.parent.x},${(d.y + d.parent.y) / 2.5}
        ${d.parent.x},${d.parent.y}`;
    });

最后结果如下：

接下来是画圆

//当一个节点中有多个子元素时(比如本例中有text和circle)，我个人喜欢用g作为容器
const nodes = g.selectAll('.node')
    .data(nodesData.descendants()) //同样是获得所有节点，便于数据绑定
    .enter().append('g')
    .attr('transform', (d) => {
        return `translate(${d.x}, ${d.y})`;//位移
    });
//画圆 
nodes.append('circle')
    .style('fill', '#c03027')
    .attr('r', 10);
//插入文字
nodes.append('text')
    .attr('dx', '.9em')
    .text((d) => {
        return d.data.name;
    });

至此，已经完成一个基本的树图。

结语

整个步骤下来我们可以发现并不是特别难，只要理解了layout及知道了如何处理层级数据即可以画出一个树图。

参考资料

d3.js API——d3.tree()
d3.js API——Hierarchy
d3.js API——node.descendants()
Tree Layout Orientations
Tidy Tree