三 d3.js 用层画条形图_3.用层条形图 (1)为同类层添加样式 div.bar tdisplay: inline-block-CSDN博客

代码解释：

1.1为同类层添加样式

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

1.2声明要为某类层设置属性

.attr("class","bar")

1.3为每个特定的层设置属性

.style("height",function(){

return(d*5)+"px";

});

设置层之间的间隔

margin-right:2px;

2源码

<!DOCTYPE html>
<html>
<head >
    <meta charset="UTF-8">
    <script  type="text/javascript" src="d3.js"></script>
    <title>11</title>
    <style type="text/css">
        div.bar {
            width: 20px;
            display: inline-block;
            margin-right: 2px;
            background-color: teal;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        var data=[1,2,3,4,5];
        d3.select("body").selectAll("div")
                .data(data).enter()
                .append("div")
                .attr("class","bar")
                .style("height",function(d){
                    return (d * 5)+"px";
                });
    </script>
</body>
</html>

演示：

使用随机数值：

很多时候可以用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);

})


 
 我们用d3.round函数对随机数保留一位小数四舍五入。
我们用d3.random.normal(15,8)()生成一个满足期望是15，方差是8的正态分布的随机数。

//返回[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]



代码：

<!DOCTYPE html>
<html>
<head >
    <meta charset="UTF-8">
    <script  type="text/javascript" src="d3.js"></script>
    <title>11</title>
    <style type="text/css">
        div.bar {
            width: 20px;
            display: inline-block;
            margin-right: 2px;
            background-color: teal;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        var data=d3.range(25);
        d3.select("body").selectAll("div")
                .data(data).enter()
                .append("div")
                .attr("class","bar")
                .style("height",function(d){
                    return (d * 5)+"px";
                });
    </script>
</body>
</html>
图：





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>test-demo</title>
    <script type="text/javascript" src="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>



图：