D3.js學習記錄
阿新 • • 發佈：2018-06-15
www pts 輸入 新元素 指定 插入 html屬性 strong 選擇集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>D3</title>
<style>
.chart div{
background-color: #3498db;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script src="/javascripts/d3js/d3.v3.js"></script>
<script src="/javascripts/d3js/jsonData3.js"></script>
</head>
<body>
<script>
//create a data
var data = [4, 8, 5, 2, 10, 20];
//創建一個容器
var chart = d3.select("body")
.append("div")
.attr("class", "chart");
//向容器中添加幾個div元素
chart.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function(d){
return d*10 + ‘px‘;
})
.text(function(d){
return d;
})
</script>
</body>
</html>
D3.js也是一個javascript框架，像jquery一樣， 只不過他的特長是在數據可視化這一塊而已。所以不要覺得D3是多麽的復雜。在上面的代碼中我們可以看到D3的一些用法：
選擇元素：d3.select(“element”)，這個就是jquery中的$()，只不過沒有采用簡寫的形式。
創建並添加新元素到選定元素後：.append("element")，就是javascript中的append方法一樣，他返回的是一個添加了該新元素的元素集。
設置或獲取指定屬性：.attr(name[, value])，同jquery中的attr()。
D3.js采用的是像jquery中的鏈式方法，在執行一個操作後可以繼續調用其他的方法，但是，我們需要註意的是，前一個方法的輸出類型必須要和下一個方法的輸入類型相匹配！
選擇所選的元素中的多個子元素組成新的選擇集:selectAll("obj")，創建一個“空房子”--selection，這樣我們可以往裏面填充“家具”--數據。不過現在的選擇集還沒有插入到文檔，因為我們還要給這些空的選擇集加入數據是不是？
設置或獲取一組元素的綁定數據：.data(dataset)，這樣“空房子”分配“家具”了，D3會根據數據來進行合理的分配，分配好了，這些家具下一步是不是該搬進這些小房子了呢？
返回一個新的、綁定了數據的元素：.enter()， 這樣子我們的之前創建的房子就可以使用了。他們在DOM中有了自己的位置，我們終於可以往他身上進行操作了！
設置HTML屬性：.attr()
設置CSS樣式：.style()
D3.js學習記錄