数据可视化【十一】树状图

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