D3.js学习笔记三:与网页元素的交互

2015年02月11日 javascript 暂无评论 阅读 174 views 次

传统的javascript能够和网页元素互动,那么D3没理由不支持这一行为,在D3中append语法可以为DOM添加网页元素。我们看一个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-3-drawingDivBar</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
<style type="text/css">

div.bar {
display: inline-block;
width: 20px;
height: 75px; /* Gets overriden by D3-assigned height below */
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) {
var barHeight = d * 5;
return barHeight + "px";
});

</script>
</body>
</html>

 

案例效果如下图:

没什么好解释的,就是添加一些层,然后将它们的高度变化一下。

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: