d3.js(1)
1. 添加元素语法：
[selection].append("p");
d3.select("body").append("p").text("New paragraph!");
- 选择body标签，为之添加一个p标签，并设置它的内容为New paragraph！
d3.select("body").append("p").text("New paragraph!");
2. 数据绑定：
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
- 查找DOM中的body。
d3.select("body")
- 选择DOM中的所有段落。
由于没有存在，这将返回一个空的选择。这个选择为空，代表段落很快就会存在。
selectAll("p")
- 计数和分析我们的数据值。
有五个值，之后我们的数据集执行了5次，每个值一次。
注意这里data函数会绑定数据，并能够使用D3经典的E-N-E编程套路（这个以后会讲到，暂时不用关心），而另外一个数据绑定函数datum则只是替换一组新的数据。
data(dataset)
- 绑定数据和DOM元素。
这个方法将数据传递到DOM中。如果数据值比相应的DOM元素多，就用enter()创建一个新元素的占位符。
enter()
- 追加元素
通过enter()创建的占位符 在DOM中插入一个p元素。
append("p")
- 设置元素的文本
为新创建的p标签插入一个文本值。
text("New paragraph!")3. 使用数据：
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {
return "I can count up to " + d;
})
.style("color", function(d) {
if (d > 15) { //大于15的数字显示为红色
return "red";
} else {
return "black";
}
});4.条形图源码
<!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>
参考：http://blog.csdn.net/zhang__tianxu/article/category/1623437/2
