一：什麼是D3？
d3，簡單來說，就是一種基於javascript的數據可視化庫，其效果一般展現在網頁中，可交互。
使用方法：首先需下載d3相應的庫，導入方法：<script src="d3庫的路徑"></script>。也可以在聯網的情況下直接寫d3的下載路徑，此時不用下載。
二：數據集
在js中選擇數據通常採用以下方式（假定選擇的是所有p標籤）：
<body>
<p id="first">I can up to 5</p>
<p>I can up to 10</p>
<p>I can up to 15</p>
<script>
//選擇所有數據
p=document.getElementsByTagName("p");
//改變指定數據的顏色
p[1].style.color="red";
//選擇單個數據
f=document.getElementById("first");
f.style.color="cyan";
</script>
</body>
使用d3選擇數據：
<body>
<p id="first">I can up to 5</p>
<p>I can up to 10</p>
<p>I can up to 15</p>
<p>I can up to 20</p>
<script>
//選擇所有數據
ps=d3.select("body").selectAll("p");
//改變ps的顏色
ps.style("color","red");
//改變指定數據的顏色
ps.style("color",function(i){
if(i==1){return "blue";}
});
//改變指定數據的顏色-----使用過濾器
ps.filter(function(i){
if(i==2){return true;}
}).style("color","yellow");
//選擇單個數據
f=d3.select("body").select("#first");
f.style("color","cyan");
</script>
</body>
那麼，上述代碼中的p和f即爲D3中的數據集。其中，select表示選擇一條數據作爲數據集，selectAll表示選擇多條數據作爲數據集。
三：綁定數據
1.綁定單個數據（datum）
<body>
<p id="first">I can up to 5</p>
<p>I can up to 10</p>
<p>I can up to 15</p>
<script>
var s=["JavaScript","Jquery","D3"];
//選擇所有數據
p=d3.select("body").selectAll("p");
//綁定數據
var bind=p.datum(s);
//顯示數據
bind.text(function(d,i){
return "序號："+i+"，數據："+d;
});
</script>
</body>
效果如下：
根據展示結果顯示，那麼當使用datum綁定數據時，數據集中的所有數據都會與要綁定的數據綁定。
2.綁定多個數據（data）
<body>
<p id="first">I can up to 5</p>
<p>I can up to 10</p>
<p>I can up to 15</p>
<script>
var dataset=[7,8,9];
//選擇所有數據
p=d3.select("body").selectAll("p");
//綁定數據
var bind=p.data(dataset);
//顯示數據
bind.text(function(d,i){
return "序號："+i+"，數據："+d;
});
</script>
</body>
效果如下：
那麼，根據結果可以知道，當綁定多個數據的數據集時，要綁定的數據會與原有數據中的數據一一對應進行綁定。
由於要綁定的數據會與原有數據中的數據一一對應進行綁定，那麼在綁定數據中的過程中就可能會出現要綁定的數據長度與原有數據長度不一致的情況，所以有以下處理方式：
（1）要綁定的數據長度=原有數據長度
此種情況不用增加刪除，直接綁定數據即可。
（2）要綁定的數據長度>原有數據長度（enter）
<body>
<p id="first">I can up to 5</p>
<p>I can up to 10</p>
<p>I can up to 15</p>
<script>
var dataset=[7,8,9,10];
//選擇所有數據
p=d3.select("body").selectAll("p");
//綁定數據
var bind=p.data(dataset);
//顯示數據
bind.text(function(d,i){
return "序號："+i+"，數據："+d;
});
//處理多餘數據
var add=bind.enter();
add.append("p").text(function(d,i){
return "序號："+i+"，數據："+d;
});
</script>
</body>
效果如下：
那麼，如果不對多餘數據進行處理，效果與（1）效果相同。
（3）要綁定的數據長度<原有數據長度（exit）
如果不對原有數據中多餘數據進行處理（假定要綁定的數據長度爲2，原有數據長度爲3），效果如下：
那麼此時，如果不需要原有數據的多餘數據，可以採取以下方式進行處理：
<body>
<p id="first">I can up to 5</p>
<p>I can up to 10</p>
<p>I can up to 15</p>
<script>
var dataset=[7,8];
//選擇所有數據
p=d3.select("body").selectAll("p");
//綁定數據
var bind=p.data(dataset);
//顯示數據
bind.text(function(d,i){
return "序號："+i+"，數據："+d;
});
//處理多餘數據
var del=bind.exit();
del.remove();
</script>
</body>
效果如下：
