上一節中， 我們對于svg 的坐標系統 和 常用的比例尺進行了學習， 了解了坐標軸的建立，懂得了數據綁定和事件回調在d3中的應用。同時也實現了一些常用的交互事件， 例如點擊和框選配合柱狀圖使用。這一節，我們將繼續以以做帶學的方式對d3.js進行學習。
目標：制作餅圖，并給它添加一些相應的動畫和交互事件。
在餅圖制作之前，先介紹幾個知識點：
布局
布局（layout），這是d3中很重要的概念，從 字面看像是繪制的意思，然而事實上它真正的含義應該叫 數據轉換。
舉個例子，[100, 200, 150, 240]這樣一組數據，直接繪制餅圖是不行的，需要把它轉換成“起始角度”和“終止角度”。因此，布局的意義就在于把數據轉換為方便繪圖的數據。
d3一共提供了12個布局，它們分別是
- 樹形圖 Tree
- 力導向圖 Force
- 弦圖 Chord
- 餅狀圖 Pie (接下來會用到的布局)
- 集群圖 Cluster
- 捆圖 Bundle
- 打包圖 Pack
- 直方圖 Histogrom
- 分區圖 Partition
- 堆棧圖 Stack
- 矩陣樹圖 TreeMap
- 層級圖 Hierarchy
布局的使用遵循以下步驟：
- 確定初始數據 2.轉換數據 3.繪制
弧生成器
餅狀圖又稱餅圖，通過將圓切分為幾個扇形來描述數量和百分比的關系。
餅狀圖布局能夠根據一系列數據生成一系列對象，每個對象都包含起始角度和終止角度等一些繪圖所需要的數據。 在此之前，可以先使用生成好的數據，看扇形的每個弧是如何生成出來的。
在繪制最簡dome時，先了解一下弧圖常用的 起始角度訪問器startAngle, 終止角度訪問器endAngle, 內半徑訪問器innerWith和外半徑訪問器outerWidth各代表了哪段距離
弧生成器各參數意義
首先只繪制一段弦
var dataset = { startAngle: 0, endAngle: Math.PI * 0.75}
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300)
//創建一個弧生成器
var arcPath = d3.arc()
.innerRadius(50)
.outerRadius(100)
//添加路徑
svg.append("path")
.attr("d", arcPath(dataset))
.attr("transform", "translate(150, 150)")
.attr("stroke", "black")
.attr("stroke-width", "2px")
.attr("fill", "yellow")
效果如下
生成的弦
接下來使用多組數據生成一個完整的弧 >>>>>
準備的數據
var dataset = [ { startAngle: 0, endAngle: Math.PI * 0.6 },
{ startAngle: Math.PI * 0.6, endAngle: Math.PI },
{ startAngle: Math.PI, endAngle: Math.PI * 1.2 },
{ startAngle: Math.PI * 1.2, endAngle: Math.PI *2 }
]
代碼部分
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
//創建一個弧生成器
var arcPath = d3.arc().innerRadius(50).outerRadius(100)
var color = d3.scaleOrdinal(d3.schemeCategory20) // d3內置的序數比例尺，里面包含著各種經過設計師篩選的顏色可供選擇
//添加路徑
var arcs = svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("d", function(d){ return arcPath(d) } ) // 生成弧
.attr("transform", "translate(150, 150)") //一般都是 width/2 和 height/2 把角度中心偏移到svg畫布中心
.attr("stroke", "black")
.attr("stroke-width", "0px")
.attr("fill", function(d, i){ return color(i) } )
效果如下
效果
了解了兩個基本的概念，接下來開始使用布局和弦生成器制作餅圖
準備的數據
const data = [
["香蕉", 150],
["蘋果", 200],
["菠蘿", 190],
["南瓜", 250],
["雪梨", 350],
["西紅柿", 190]
]
基礎設置及數據處理
const width = 300
const height = 300
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height",height)
// 進行數據轉換
var pie =d3.pie()
.sort(null)
.value(function(d){ return d[1] })
var pieData = pie(data)
console.log(pieData)
原始數據經過餅狀布局轉換之后
布局轉換之后的數據
轉換之后的數據有原始數據，也包含起始角度和終止角度，此時數據已經和最簡demo中的數據基本一致了。
進行繪制
首先，在svg中生成多個<g>元素，用來容納每一段弧，每一段弧包括路徑<path> ，文字<text>， 直線<line>三種元素
//添加路徑
//添加對應的弧組，即對應的弧元素<g>
var arcs = svg.selectAll("g")
.data(pieData)
.enter()
.append("g")
.attr("transform", function(){
return `translate(${ width /2 }, ${ height / 2})` //es6
})
//添加弧的路徑元素
arcs.append("path")
.attr("fill", function (d, i) { return color(i)})
.attr("d", function (d) { return arc(d) })
添加文字
在添加文字之前，先介紹一下文字的坐標是如何計算的。
計算文字坐標時， 會使用到arc.centroil(), 此方法可以計算弧的中心，但是弧的中心是相對于圓心來說的，例如如果某段弧的中心是(100,100)，不是值svg的(100， 100)，而是在在相對于圓中心的(100，100)處. 具體可見圖示。
弧中心的計算
接下來添加文字
arcs.append("text")
.attr("transform", function(d){
var x = arc.centroid(d)[0] * 1.5
var y = arc.centroid(d)[1] * 1.5
return `translate(${x}, ${y})`
})
.text(function(d){
var percent = Number(d.value) / d3.sum(data, function(d){ return d[1]}) *100
return percent.toFixed(2) + "%"
})
.attr("text-anchor", "middle")
.attr("fill", "#fff")
.style("font-size", "10px")
效果
預覽
在外部添加一些指示說明
//添加弧外文字
arcs.append("line")
.attr("stroke", "#666")
.attr("x1",function(d){ return arc.centroid(d)[0] * 2})
.attr("y1",function(d){ return arc.centroid(d)[1] * 2})
.attr("x2",function(d){ return arc.centroid(d)[0] * 2.4})
.attr("y2",function(d){ return arc.centroid(d)[1] * 2.4})
arcs.append("text")
.attr("text-anchor", "middle")
.attr("transform", function(d){
var x = arc.centroid(d)[0] * 2.6
var y = arc.centroid(d)[1] * 2.6
return `translate(${x}, ${y})`
})
.text(function(d){
return d.data[0]
})
.attr("fill", "#666")
.style("font-size",' 14px')
效果如下
添加外部文字之后的效果
帶有交互效果的餅狀圖
事實上在，在一些數據量比較大或者比較多的場景下，會選擇以其他方式呈現餅圖的數據，例如提示框。接下來，開始制作帶有提示框的圖表，以及其配套的一些動畫。
js部分
const width = 300
const height = 300
const innerRadius = width / 8
const outerRadius = width / 3
const innerRadiusFinal = width / 10
const outerRadiusFinal = width / 2.8
// 進行數據轉換
var pie =d3.pie()
.sort(null)
.value(function(d){ return d[1] })
var pieData = pie(data)
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height",height)
//創建一個弧生成器
var arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
// for animation
var arcFinal = d3.arc()
.innerRadius(innerRadiusFinal)
.outerRadius(outerRadiusFinal);
var color = d3.scaleOrdinal(d3.schemeCategory20)
//添加路徑
//添加對應的弧組，即對應的弧元素<g>
var arcs = svg.selectAll("g")
.data(pieData)
.enter()
.append("g")
.attr("transform", function(){
return `translate(${ width /2 }, ${ height / 2})`
})
//添加弧的路徑元素
arcs.append("path")
.attr("fill", function (d, i) { return color(i)})
.attr("d", function (d) { return arc(d) })
.on("click",function(d){
console.log(d.data)
})
.on("mouseover", function(d){
tooltip.html(d.data[0] +":"+d.data[1])
.style("left", d3.event.pageX + 20+ "px")
.style("top", d3.event.pageY + 20 + "px")
.style("opacity", 1)
d3.select(this).transition()
.duration(150)
.attr("d", arcFinal)
})
.on("mouseout", function(){
d3.select(this).transition()
.duration(150)
.attr("d", arc)
tooltip.style("opacity", 0)
})
//添加文字
arcs.append("text")
.attr("transform", function(d){
var x = arc.centroid(d)[0]
var y = arc.centroid(d)[1]
return `translate(${x}, ${y})`
})
.text(function(d){
var percent = Number(d.value) / d3.sum(data, function(d){ return d[1]}) *100
return percent.toFixed(2) + "%"
})
.attr("text-anchor", "middle")
.attr("fill", "#fff")
.style("font-size", "10px")
//添加提示框
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0)
提示框樣式
.tooltip {
position: absolute;
width: 100px;
height: auto;
font-size: 14px;
text-align: center;
border: 1px solid #666;
border-radius: 5px;
background:rgba(255, 255, 255, 0.5)
}
最終效果
最后效果
千里之行，始于足下，希望我的分享能給你一些幫助，謝謝。
