簡介：
D3是一個用JavaScript編寫的數據可視化庫，支持畫多種圖像。
官方解釋：D3是一個javascript的庫，用於操作基於數據的文檔。D3可以讓你的數據變爲有生命的HTML，SVG和CSS圖形。D3可以兼容當代的瀏覽器標準，而不需要在找一個屬性框架，D3綁定了強大的數據可視化元件和對DOM操作的數據驅動的方式。
（D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.）
餅圖分析:
1、d3.layout.pie()
構建一個餅圖佈局，使用默認的方法訪問數據，默認不排序。起始弧度爲0，結束弧度爲2π,返回的layout可以是對象，也可以是函數。也就是你可以調用這個函數，這個函數也有額外的方法改變自身的行爲，就像其它的d3類一樣。
#pie.value([accessor]) //指定如何訪問數據
如果不指定如何訪問數據，會出現上述錯誤，餅圖佈局不知道如何數據在那裏，也不知道如何指定數據的弧度。
通過value告訴#pie如何訪問數據。
2、d3.svg.arc()
//創建一個arc生成器，也就是扇形。使用默認的內部半徑，外部半徑，起始角度，結束角度 訪問數據的函數。返回的函數生成path數據來形成閉合的solid arc。
#arc(datum[, index]) //返回path字符串，可選的index。生成類似這種數據。
3、指定相應的映射。
4、數組映射。
5、數據可視化。
5.1 畫餅圖
首先選擇器的data()函數會遍歷數組中的所有元素。
5.1.1 d3.interpolate，它會根據傳入的參數。自動識別對象，在對象之間插入值。
如果是對象,那就在對象的屬性之間插值。
5.1.2 d3.svg.arc 弧線生成器。以下的腳本即可生成一個餅圖。
<script>
var w = 300,h = 300;
var data = [1,2,3,4,5];
var pie = d3.layout.pie();
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
var arc = d3.svg.arc().outerRadius([w/2]).innerRadius([0]); //
注意的地方是必須要加上內部半徑，否則後來算不出扇形的中心位置
arcs = svg.selectAll("g").data(pie(data)).enter().append("g").attr("transform","translate("+w/2 +","+h/2+")");
arcs.append("path").attr("d",arc).attr("fill", function () {
return d3.rgb(Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255));
});
arcs.append("text").attr("transform", function (d) {
console.log(d);
return "translate("+arc.centroid(d)+")";
}).attr("text-anchor","start").text(function (d) {
return d.value;
})
</script>
5.1.3 有個細節問題是，在畫圖之前就應該規劃好大致內容。開始時
5.2 在相應的餅圖周圍，添加標籤。標籤本身也是利用餅圖，只是在小餅圖的外圍添加了一個大的餅圖。然後標上漢字。
原理與上面畫餅圖類似。
插入漢字。
加上文字變換效果，已經文字的位置。 變換隻使用了屬性插值和樣式插值。
屬性插值爲文字位置，樣式插值爲文字對齊方式。
5.3 畫折線連接內部餅圖與外部標籤。這裏是折線。
最後兩點利用的就是變換的知識。
6、最終效果
