D3.js的v5版本入門教程（第十三章）

    這一章我們來繪製一個簡單的餅狀圖，我們只繪製構成餅狀圖基本的元素——扇形、文字，從這一章開始，內容可能有點難理解，因為每一章都會引入比較多的難理解知識點，在這裡作者本人也只是粗略的講解每個新知識點的意思！如果不是很理解的話，需要讀者自行檢視官網API

    為了繪製一個餅狀圖，我們還是需要以下新的知識點

• d3.arc( {} ),弧形生成器，用以繪製弧形，需要傳入一些用以繪製弧形基本的資料的物件，例如，該物件的屬性可以包括（我用官網api的示例）

• d3.pie()，餅狀圖生成器，用以產生繪製一個弧的必須的資料的物件（利用原始資料產生新的資料），使用方式：d3.pie(data)
• d3.arc().centroid()，這裡使用官方api的解釋，通過下面這張圖，這句程式碼的意思一目瞭然

• d3.schemeCategory10，使用官方API示例，可以看出，這段程式碼表示一些離散的色彩

    有了上面的基本知識後（如果你理解了），接下來的繪製過程就簡單了

    1、資料準備

        var marge = {top:60,bottom:60,left:60,right:60}
    	var svg = d3.select("svg")
    	var width = svg.attr("width")
    	var height = svg.attr("height")
    	var g = svg.append("g")
    		.attr("transform","translate("+marge.top+","+marge.left+")");
    		
    	var dataset = [ 30 , 10 , 43 , 55 , 13 ];//需要將這些資料變成餅狀圖的資料
 

    2、設定一個顏色比例尺

//設定一個color的顏色比例尺，為了讓不同的扇形呈現不同的顏色
    	var colorScale = d3.scaleOrdinal()
    		.domain(d3.range(dataset.length))
    		.range(d3.schemeCategory10);

    3、新建一個餅狀圖

//新建一個餅狀圖
    	var pie = d3.pie();

    4、新建一個弧形生成器

//新建一個弧形生成器
    	var innerRadius = 0;//內半徑
    	var outerRadius = 100;//外半徑
    	var arc_generator = d3.arc()
    		.innerRadius(0)
    		.outerRadius(100);
 

    5、利用餅狀圖生成器轉換資料

//將原始資料變成可以繪製餅狀圖的資料，
    	var pieData = pie(dataset);
    	
    	//在瀏覽器的控制檯列印pieData
    	console.log(pieData);

    控制檯輸出的結果：

    可以看到，資料的格式已經成功轉換，已經是可以畫弧的資料了

    6、開始繪製，老規矩，先為每一個扇形及其對應的文字建立一個分組<g>

ar gs = g.selectAll(".g")
    		.data(pieData)
    		.enter()
    		.append("g")
    		.attr("transform","translate("+width/2+","+height/2+")")//位置資訊

    7、繪製扇形

//繪製餅狀圖的各個扇形
    	gs.append("path")
    		.attr("d",function(d){
    			return arc_generator(d);//往弧形生成器中出入資料
    		})
    		.attr("fill",function(d,i){
    			return colorScale(i);//設定顏色
    		});

    程式碼說明：

        -arc_generator(d);//往弧形生成器中出入資料，由官方API的示例可知（我已經在本章開頭截了圖），弧形生成器所需要傳入的資料就是餅狀圖生成器返回的資料

    8、文字

//繪製餅狀圖上面的文字資訊
    	gs.append("text")
    		.attr("transform",function(d){//位置設在中心處
    			return "translate("+arc_generator.centroid(d)+")";
    		})
    		.attr("text-anchor","middle")
    		.text(function(d){
    			return d.data;
    		})

    注意：這裡的文字獲取需要 用到d.data，我們可以根據在控制檯輸出的資料格式可以知道，因為在轉換資料後，新資料的data域才是原始資料

    最後，整個程式碼的允許結果

    雖然過程很艱難，但是結果還是很不錯的，如果理解了，其實也還是很簡單的，所以多多看官網API+百度（spoiler alert：後面章節的繪圖效果更棒）

（翻外篇）d3.js在網頁端視覺化neo4j圖資料庫

    為了讓大家更好的學習d3.js，“d3.js在網頁端視覺化neo4j圖資料庫”這是一個比較綜合的專案——利用neo4j的java驅動API從neo4j中取資料，並利用d3.js在網頁端進行視覺化。大家在學完基礎課程後可以做一下這個專案，進行鞏固。點選下面連結進行檢視：d3.js視覺化neo4j圖資料庫專案專欄