Constructing a node-link tree visualization
首先将节点之间的连线画出来。
使用json函数读取文件以后，使用hierarchy等函数得到连线的数组，然后绑定这个数组，给每个元素添加一个path，绘画使用的是一个函数linkHorizontal（因为这里是水平的树状图，如果你想绘制垂直的也可以使用linkVertical，需要注意的是，水平的需要交换每个连线的x和y，垂直的不需要）
index.js
json('data.json').then(data =>{const root = hierarchy(data);const links = treeLayout(root).links();const linkPathGenerator = linkHorizontal().x(d => d.y).y(d => d.x)//上面的x和y进行了替换，是因为我们想要绘制水平的树状图，如果使用垂直的，x和y应该是对应的g.selectAll('path').data(links).enter().append('path').attr('d', linkPathGenerator);
}
style.css
path {fill: none;stroke: #f7a4a4;
}Adding text labels to the nodes
通过root.descendants获得每个节点的位置数组，绑定这个数组以后添加text，同样需要注意水平的x和y需要分开。然后使用一些技巧使得文字变得更加好看
const treeLayout = tree().size([Height, Width]);json('data.json').then(data =>{const root = hierarchy(data);const links = treeLayout(root).links();const linkPathGenerator = linkHorizontal().x(d => d.y).y(d => d.x)//上面的x和y进行了替换，是因为我们想要绘制水平的树状图，如果使用垂直的，x和y应该是对应的g.selectAll('path').data(links).enter().append('path').attr('d', linkPathGenerator);g.selectAll('text').data(root.descendants()).enter().append('text').attr('x', d => d.y).attr('y', d => d.x).text(d => d.data.data.id);});
Using the Margin Convention（约定）
为了让文字布局更加好看，我们需要设置Margin来设置边框
const margin = {top:0, right: 70, bottom: 0, left:90};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;const treeLayout = tree().size([innerHeight, innerWidth]);const zoomG = svg.attr('width', width).attr('height', height).append('g');const g = zoomG.append('g')
.attr('transform',`translate(${margin.left},${margin.top})`);
然后后面都在g上添加元素即可。这里设置了两层g实际上是为了后面放大缩小的时候使用
Tweaking（调整） label alignment（队列） and size
我们还需要设置标签的位置，标签的字体大小：
index.js
g.selectAll('text').data(root.descendants()).enter().append('text').attr('x', d => d.y).attr('y', d => d.x).attr('dy', '0.32em')//使得节点被线从中间穿过.attr('text-anchor', d => d.children ? 'middle' : 'start')//将文字放在中间.attr('font-size', d => 3.2-d.depth + 'em') //使得文字大小随层数递减.text(d => d.data.data.id);
style.css
text {text-shadow:
/* 给标签添加白色的阴影，这样就不会被线挡住 */-1px -1px 3px white,-1px 1px 3px white,1px -1px 3px white,1px 1px 3px white;pointer-events: none;
/* 鼠标经过文字的时候不会变成可编辑的样子（因为本来就是不可编辑的） */
}
Panning & Zooming
这个和以前一样，在call函数里面添加zoom函数：
index.js
svg.call(zoom().on('zoom',() =>{zoomG.attr('transform', event.transform);
}));
Curran说弄两层g这样就可以解决放大再缩小以后边框丢失的问题，但是我发现好像并没有什么卵用。。。
Using a custom font
选择一个好看的字体也很重要，首先在Google Fonts里面找到一个喜欢的字体，然后点击select
然后把link放在html文件里面，后面的字体放在对应的选择器里面就可以了。
效果图：
代码地址：https://vizhub.com/Edward-Elric233/706152caf5ca4aae992cc371f2d5891a
