D3.js Hello World
2017-05-17 本文已影响38人
Andone1cc
将上一篇文章中下载的zip解压缩后我们们得到了3个文件：d3.js、d3.min.js和许可证文件。在开发过程中，建议使用d3.js，它可以帮你深入到D3库中跟踪调试JavaScript代码。把d3.js和新建的index.html放在同一个文件夹里。
我们已经搭建了一个最简单的D3数据可视化开发环境。现在可以用我们最喜欢的文本编辑器编辑那个html文件，还可以用浏览器打开它来检查可视化的效果。
在HTML文件中引入d3.js后，我们就获得了一个全局变量：d3。d3.js 的功能就通过这个对象暴露出来
这个例子展示了d3.js实现数据可视化的典型理念：基于集合运算的声明式数据可视化。
请你注意上图中使用d3时经典的四把斧：d3总是要求使用者声明两个集合：DOM对象集和数据集，并根据集合运算实施数据与DOM对象的匹配，最后通过修改匹配的DOM对象来获得可视化的效果。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello D3</title>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css">
#barChart{
background:#f0f0f0;
padding:10px;
font-family:Verdana;
}
#barChart .bar{
left:0px;
height:20px;
background:#00ff00;
margin:5px;
}
</style>
</head>
<body>
<div id="barChart"></div>
<script type="text/javascript">
var data=[20,15,23,78,57,29,34,71]
d3.select("#barChart")
.selectAll(".bar") //指定要操作的DOM对象
.data(data) //指定要操作的数据
.enter() //计算缺失的DOM对象
.append("div") //添加缺失的DOM对象
.text(function(d){return d;}) //设置新增DOM对象的文本
.classed("bar",true) //设置新增DOM对象的CSS类
.style("width",function(d,i){return d + "px";});
//设置新增DOM对象的宽度
</script>
</body>
</html>
