d3 使用随机数据生成条形图

时间：2022-03-18 02:12:33
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>

根据随机生成的数据生成条形图

 

标签：

相关文章