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个数字
d3.random.normal(15,8)() 生成期望是15方差是8的动态分布随机数
round(...,1) 保留一位小数
<!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>
根据随机生成的数据生成条形图
时间： 2024-10-16 17:30:56