初识数据可视化工具D3

D3(Data Driven Document)即数据驱动文档，是JS图形可视化工具，在Github上已有73000多star，是目前最流行的JS可视化库之一。使用D3可以实现更加灵活且富有变化的图形。在使用Echarts的配置项就可以完成绘图，而D3需要自己造轮子，手动实现可视化的每一处细节，虽然门槛更高、难度更大，但是使用起来更加灵活自由，能够实现更为复杂多样的可视化效果。

通过使用数据可视化工具D3，完成一个两种模式分布的字母排列

一、引入方式

1、通过官网下载js文件

<script src="d3.v7.min.js"></script>

2、通过CDN引入

<script src="https://d3js.org/d3.v7.min.js"></script>

二、使用svg元素

准备好用于D3画图的svg，宽960像素、高600像素。g是svg元素的一种，后续操作都在g元素上进行。

<!-- 用于D3画图的宽960像素，高600像素的svg -->
	<svg width="960" height="600" style="margin:40px;">
		<!-- g是svg元素的一种 -->
		<g></g>
	</svg>	

三、准备编写JS代码

<script>
$(document).ready(function() {
});
<script>

四、添加驱动D3可视化数据

1、可视化效果会呈现两种不同的状态，定义一个mode变量

2、再定义一个alphabet字符串，其内容是26个英文字母的大小

3、随机地从alphabet中选取200个字母并添加到数组chars中，作为驱动D3进行可视化的数据

4、使用d3.select()选择HTML中的svg标签并保存为变量便于后续使用

5、使用attr()函数获取svg标签的宽度和高度。

// 定义一个变量mode，用于可视化呈现两种不同的状态
	var mode = true;
	// 定义一个字符串alphabet，其内容是26个英文字母的大小写
	var alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
	var chars = [];
	// 随机从alphabet中选取200个字母并添加到chars数组中，作为驱动D3进行可视化的数据
	for (var i = 0; i < 200; i++) {
		chars.push(alphabet[Math.floor(Math.random() * alphabet.length)]);
	}
	// 使用d3,select()选择HTML中的svg标签并保存为变量便于后续使用
	var svg = d3.select('svg');
	// 使用attr()函数获取svg标签的宽度
	var width = svg.attr('width');
	// 使用attr()函数获取svg标签的高度
	var height = svg.attr('height');

五、操作svg元素

selectAll()函数用于选择DOM元素，data()函数用于绑定数据，append()函数用于添加数据

svg.select('g')
		// selectAll()函数用于选择DOM元素
		.selectAll('text')
		// data()函数用于绑定数据
		.data(chars)
		.enter()
		//append()函数用于添加数据
		.append('text')
		.text(function(d) {
			return d;
		}).attr('transform', function(d, i) {
			return 'translate(' + (i * width / chars.length) + ',' + (height /
				2 + (height - 40) * Math.sin(i * 0.1) / 2) + ')';
		}).attr('font-size', function(d) {
			return Math.floor(10 + 15 * Math.random());
		}).attr('fill', '#333')
		.attr('fill-opacity', function(d) {
			return Math.random() * 0.6 + 0.4;
		});

		$('span').click(function(event) {
			if (mode) {
				fly(mode);
				$(this).text('站队');
				mode = false;
			} else {
				fly(mode);
				$(this).text('解散');
				mode = true;
			}
		});

六、为按钮span绑定点击事件响应函数

$('span').click(function(event) {
			if (mode) {
				fly(mode);
				$(this).text('站队');
				mode = false;
			} else {
				fly(mode);
				$(this).text('解散');
				mode = true;
			}
		});

七、fly()函数

1、通过attr()函数设置每个text标签的位置，有两种模式，一种为随机打乱，一种为按正弦分布

2、transition()表示更改属性时使用过渡效果

3、delay()用于设置过渡的延时，使用匿名函数让延时和数据在数组中的序号成正比

4、duration()用于设置过渡的持续时间。

function fly(param) {
			d3.select('svg g')
				.selectAll('text')
				// transition()函数表示更改属性时使用过渡效果
				.transition()
				// delay函数用于设置过渡的延时
				.delay(function(d,i){
					return i * 2;
				})
				// duration函数用于设置过渡的持续时间
				.duration(600)
				.attr('transform', function(d,i){
					if(mode) {
						return 'translate(' + (width-40) * Math.random() + ',' + 
							(height - 40) * Math.random() + ')';
					} else {
						return 'translate(' + (i* width/ chars.length) + ',' + (
							height / 2 + (height - 40) * Math.sin(i *0.1)/2)+
						')';
					}
				});
		}

八、成果展示

字母按正弦样式排列

按下按钮后，字母随机分布

九、总结

通过此次项目使用D3的选择DOM元素和绑定数据，数据添加、更新DOM元素的操作，使用D3一般遵循以下流程：

• 为DOM元素绑定数据
• 利用数据确定DOM元素的内容和外观等属性
• 当数据发生变化时，相应地更新DOM元素