【D3.js数据可视化系列教程】--（六）生成测试数据

最新推荐文章于 2023-05-13 10:01:32 发布

司机大傻

最新推荐文章于 2023-05-13 10:01:32 发布

阅读量1.2w

点赞数 8

分类专栏：数据可视化 D3数据可视化系列教程文章标签： d3 d3.js d3js 数据可视化

本文链接：https://blog.csdn.net/tianxuzhang/article/details/11346843

版权

数据可视化同时被 2 个专栏收录

44 篇文章 47 订阅

订阅专栏

D3数据可视化系列教程

36 篇文章 203 订阅

订阅专栏

1 使用随机数值

这节内容其实很简单，主要是传递一个思想，很多时候可以用JS生成数据来完成我们的可视化创作。

d3中有大量数据操作的函数。实际上下面用原生JS生成数据的代码改成D3的方式的话会更简洁，更强大：

原生JS方式：

var dataset = [];
for (var i = 0; i < 25; i++) {
    var newNumber = Math.round(Math.random() * 30);  //随机生成0-30的整数
    dataset.push(newNumber);
}
// 返回 [9, 7, 23, 16, 0, 20, 20, 16, 14, 19, 1, 6, 16, 0, 27, 22, 21, 17, 29, 22, 24, 9, 1, 22, 8]

D3 方式：

var dataset = d3.range(25).map(function(){
    return d3.round(d3.random.normal(15,8)(),1);
})
// 返回 [27.2, 12.9, 12.2, 6.8, 9.4, 7.1, 17.5, 30, 16.6, 24.3, 19, 16.6, 5.8, 6.1, 5, 32.3, 6.4, 17.5, 5.1, 19, 15.5, 22.4, 30.4, 6.2, 15.8]

下面的示例代码没有用到，但是稍微解释一下，读者朋友可以自己试试：

d3.range(25) 生成25个数字：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]。当然我们没有用它生成的数字，而只是用它来循环。真正生成数字的地方在map函数里。
map函数，顾名思义映射，也就是生成一个对应该位置的一个数字（当然这里强大之处不仅仅是一个数字，还可以是对象）。
我们用d3.round函数对随机数保留一位小数四舍五入。
我们用d3.random.normal(15,8)()生成一个满足期望是15，方差是8的正态分布的随机数。

2 源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-5-dataPower.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>
<style type="text/css">

div.bar {
    display: inline-block;
    width: 20px;
    margin-right: 2px;
    background-color: teal;
}

</style>
</head>
<body>
<script type="text/javascript">

var dataset = [];
for (var i = 0; i < 25; i++) {
    var newNumber = Math.round(Math.random() * 30);  //随机生成0-30的整数
    dataset.push(newNumber);
}

d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
        return (d * 5) + "px";
    });

</script>
</body>
</html>

3 效果

生成随机数字

司机大傻

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
【D3.js数据可视化系列教程】--（六）生成测试数据

一、使用随机数值填充每一条1、建立新的空的数据集数组var dataset = []; //Initialize empty array2、循环25次产生新的值for (var i = 0; i < 25; i++) { //Loop 25 times3、产生0-30的随机数 var newNumber
复制链接

扫一扫