版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
1 代码解释
1.1 为同类层添加样式
-
div
.bar
{
-
display: inline-block;
-
width: 20px;
-
background-color: teal;
-
}
1.2 声明要为某类层设置属性
.attr("class", "bar")
1.3 为每个特定的层设置属性
-
.style(
"height",
function(d) {
-
return (d *
5) +
"px";
-
});
1.4 设置层之间的间隔
margin-right: 2px;
2 源码
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>testD3-3-drawingDivBar
</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 = [
5
,
10
,
15
,
20
,
25
];
-
-
d3.select(
"body"
).selectAll(
"div"
)
-
.data(dataset)
-
.enter()
-
.append(
"div"
)
-
.attr(
"class"
,
"bar"
)
-
.style(
"height"
,
function(d)
{
-
return
(d *
5
) +
"px"
;
-
});
-
-
</script>
-
</body>
-
</html>