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元素