上一節(jié)中， 我們對于svg 的坐標系統(tǒng) 和 常用的比例尺進行了學習， 了解了坐標軸的建立，懂得了數(shù)據(jù)綁定和事件回調(diào)在d3中的應(yīng)用。同時也實現(xiàn)了一些常用的交互事件， 例如點擊和框選配合柱狀圖使用。這一節(jié)，我們將繼續(xù)以以做帶學的方式對d3.js進行學習。
目標：制作餅圖，并給它添加一些相應(yīng)的動畫和交互事件。
在餅圖制作之前，先介紹幾個知識點：
布局
布局（layout），這是d3中很重要的概念，從 字面看像是繪制的意思，然而事實上它真正的含義應(yīng)該叫 數(shù)據(jù)轉(zhuǎn)換。
舉個例子，[100, 200, 150, 240]這樣一組數(shù)據(jù)，直接繪制餅圖是不行的，需要把它轉(zhuǎn)換成“起始角度”和“終止角度”。因此，布局的意義就在于把數(shù)據(jù)轉(zhuǎn)換為方便繪圖的數(shù)據(jù)。
d3一共提供了12個布局，它們分別是
- 樹形圖 Tree
- 力導(dǎo)向圖 Force
- 弦圖 Chord
- 餅狀圖 Pie (接下來會用到的布局)
- 集群圖 Cluster
- 捆圖 Bundle
- 打包圖 Pack
- 直方圖 Histogrom
- 分區(qū)圖 Partition
- 堆棧圖 Stack
- 矩陣樹圖 TreeMap
- 層級圖 Hierarchy
布局的使用遵循以下步驟：
- 確定初始數(shù)據(jù) 2.轉(zhuǎn)換數(shù)據(jù) 3.繪制
弧生成器
餅狀圖又稱餅圖，通過將圓切分為幾個扇形來描述數(shù)量和百分比的關(guān)系。
餅狀圖布局能夠根據(jù)一系列數(shù)據(jù)生成一系列對象，每個對象都包含起始角度和終止角度等一些繪圖所需要的數(shù)據(jù)。 在此之前，可以先使用生成好的數(shù)據(jù)，看扇形的每個弧是如何生成出來的。
在繪制最簡dome時，先了解一下弧圖常用的 起始角度訪問器startAngle, 終止角度訪問器endAngle, 內(nèi)半徑訪問器innerWith和外半徑訪問器outerWidth各代表了哪段距離
首先只繪制一段弦
var dataset = { startAngle: 0, endAngle: Math.PI * 0.75}
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300)
//創(chuàng)建一個弧生成器
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")
效果如下
接下來使用多組數(shù)據(jù)生成一個完整的弧 >>>>>
準備的數(shù)據(jù)
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)
//創(chuàng)建一個弧生成器
var arcPath = d3.arc().innerRadius(50).outerRadius(100)
var color = d3.scaleOrdinal(d3.schemeCategory20) // d3內(nèi)置的序數(shù)比例尺，里面包含著各種經(jīng)過設(shè)計師篩選的顏色可供選擇
//添加路徑
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) } )
效果如下
了解了兩個基本的概念，接下來開始使用布局和弦生成器制作餅圖
準備的數(shù)據(jù)
const data = [
["香蕉", 150],
["蘋果", 200],
["菠蘿", 190],
["南瓜", 250],
["雪梨", 350],
["西紅柿", 190]
]
基礎(chǔ)設(shè)置及數(shù)據(jù)處理
const width = 300
const height = 300
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height",height)
// 進行數(shù)據(jù)轉(zhuǎn)換
var pie =d3.pie()
.sort(null)
.value(function(d){ return d[1] })
var pieData = pie(data)
console.log(pieData)
原始數(shù)據(jù)經(jīng)過餅狀布局轉(zhuǎn)換之后
轉(zhuǎn)換之后的數(shù)據(jù)有原始數(shù)據(jù)，也包含起始角度和終止角度，此時數(shù)據(jù)已經(jīng)和最簡demo中的數(shù)據(jù)基本一致了。
進行繪制
首先，在svg中生成多個<g>元素，用來容納每一段弧，每一段弧包括路徑<path> ，文字<text>， 直線<line>三種元素
//添加路徑
//添加對應(yīng)的弧組，即對應(yīng)的弧元素<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')
效果如下
帶有交互效果的餅狀圖
事實上在，在一些數(shù)據(jù)量比較大或者比較多的場景下，會選擇以其他方式呈現(xiàn)餅圖的數(shù)據(jù)，例如提示框。接下來，開始制作帶有提示框的圖表，以及其配套的一些動畫。
js部分
const width = 300
const height = 300
const innerRadius = width / 8
const outerRadius = width / 3
const innerRadiusFinal = width / 10
const outerRadiusFinal = width / 2.8
// 進行數(shù)據(jù)轉(zhuǎn)換
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)
//創(chuàng)建一個弧生成器
var arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
// for animation
var arcFinal = d3.arc()
.innerRadius(innerRadiusFinal)
.outerRadius(outerRadiusFinal);
var color = d3.scaleOrdinal(d3.schemeCategory20)
//添加路徑
//添加對應(yīng)的弧組，即對應(yīng)的弧元素<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)
}
最終效果
千里之行，始于足下，希望我的分享能給你一些幫助，謝謝。
