將上一篇文章中下載的zip解壓縮后我們們得到了3個文件：d3.js、d3.min.js和許可證文件。在開發(fā)過程中，建議使用d3.js，它可以幫你深入到D3庫中跟蹤調試JavaScript代碼。把d3.js和新建的index.html放在同一個文件夾里。
我們已經(jīng)搭建了一個最簡單的D3數(shù)據(jù)可視化開發(fā)環(huán)境?，F(xiàn)在可以用我們最喜歡的文本編輯器編輯那個html文件，還可以用瀏覽器打開它來檢查可視化的效果。
在HTML文件中引入d3.js后，我們就獲得了一個全局變量：d3。d3.js 的功能就通過這個對象暴露出來
這個例子展示了d3.js實現(xiàn)數(shù)據(jù)可視化的典型理念：基于集合運算的聲明式數(shù)據(jù)可視化。
請你注意上圖中使用d3時經(jīng)典的四把斧：d3總是要求使用者聲明兩個集合：DOM對象集和數(shù)據(jù)集，并根據(jù)集合運算實施數(shù)據(jù)與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) //指定要操作的數(shù)據(jù)
.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>
