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; 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>
根据随机生成的数据生成条形图