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

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

 

    這一章咱們來繪製一個簡單的餅狀圖，咱們只繪製構成餅狀圖基本的元素——扇形、文字，從這一章開始，內容可能有點難理解，由於每一章都會引入比較多的難理解知識點，在這裏做者本人也只是粗略的講解每一個新知識點的意思！若是不是很理解的話，須要讀者自行查看官網API

    爲了繪製一個餅狀圖，咱們仍是須要如下新的知識點

d3.arc( {} ),弧形生成器，用以繪製弧形，須要傳入一些用以繪製弧形基本的數據的對象，例如，該對象的屬性能夠包括（我用官網api的示例）
    

 

 

 

d3.pie()，餅狀圖生成器，用以產生繪製一個弧的必須的數據的對象（利用原始數據產生新的數據），使用方式：d3.pie(data)
d3.arc().centroid()，這裏使用官方api的解釋，經過下面這張圖，這句代碼的意思一目瞭然

 

 

d3.schemeCategory10，使用官方API示例，能夠看出，這段代碼表示一些離散的色彩

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

    一、數據準備

      

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 ];//須要將這些數據變成餅狀圖的數據

 

    二、設置一個顏色比例尺

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

    三、新建一個餅狀圖

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

    四、新建一個弧形生成器

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

    五、利用餅狀圖生成器轉換數據

//將原始數據變成能夠繪製餅狀圖的數據，
var pieData = pie(dataset);

//在瀏覽器的控制檯打印pieData

console.log(pieData);
    控制檯輸出的結果：

    

 

 

    能夠看到，數據的格式已經成功轉換，已是能夠畫弧的數據了

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

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

    七、繪製扇形

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

    代碼說明：

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

    八、文字

//繪製餅狀圖上面的文字信息
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：後面章節的繪圖效果更棒）————————————————版權聲明：本文爲CSDN博主「數星星等天明」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/qq_34414916/article/details/80036301