在之前的项目里面我们已经玩过echarts了，但它的封装程度太高了，容我们发挥的空间不大（但是在做基础的交互图表时十分方便）。所以，今次我们来玩玩强大的D3.js，这可谓是近年来最受欢迎的可视化组件了。
D3的自由度非常高，可以提供给玩家们很多想象与发挥空间，支持创作多种自定义的图形。一般玩家在创作复杂的可视化图形时更加倾向使用D3。但是其优点同时也是其缺点：创作一个简单的条形图也要耗费比较多时间！
D3 = Data-Driven Documents，数据驱动的文件。也就是文档内容的生成以及更新等一系列过程是基于数据的改变来驱动的。
其中有三个状态：ENTER-UPDATE-EXIT。简单解释一下：ENTER状态就是为已有的数据添加图形；UPDATE就是更新数据与图形；EXIT就是为根据数据删去多余的图形。以下就是根据D3这个基本的运行模式来实现的动态数据更新的例子：（注意D3.js的“函数即对象”的链式写法，与jQuery类似）
运行效果：（每1.5s会更新一次数据）。可见，就话这几个条条也需要几十行的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array as Data</title>
<script type="text/javascript" src="d3.js"></script>
<style>
body{
font-family: "helvetica";
}
.h-bar {
min-height: 15px;
min-width: 10px;
background-color: steelblue;
margin-bottom: 2px;
font-size: 11px;
color: #fff;
text-align: right;
padding-right: 2px;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];
var dataRange = d3.scale.linear() //创建一个值域的线性比例尺
.domain([0,100])
.range([0,300]);
var colorRange = d3.scale.linear() //创建一个颜色的线性比例尺
.domain([0,100])
.range(["#99CCCC", "#003333"]);
function render(data) {
// Enter
d3.select("body").selectAll("div.h-bar") //“应该”选择第一个body元素以及其下的类名为"h-bar"的div标签
.data(data) //绑定数据与图形
.enter() //进入状态（增加图形匹配多余的数据）
.append("div") //添加div
.attr("class","h-bar") //添加类名
.append("span"); //添加span
// Update
d3.select("body").selectAll("div.h-bar") //选择第一个body元素以及其下的类名为"h-bar"的div标签
.data(data) //绑定数据与图形
.style("width",function(d){
return dataRange(d) + "px"; //调用函数返回与该图形绑定的数据d
})
.style("background-color",function(d){
return colorRange(d); //调用函数返回与该图形绑定的数据d
})
.select("span")
.text(function(d){
return d; //调用函数返回与该图形绑定的数据d
});
// Exit
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit() //退出状态（删除没有数据的多余的图形）
.remove();
}
setInterval(function(){
data.shift(); //删除数组的第一个数据
data.push(Math.round(Math.random() * 100)); //在数组后增加一个1-100的随机数
render(data);
},1500); //2s执行一次
render(data);
</script>
</body>
</html>
网友评论