深入浅出d3.js数据可视化之道（3）
2017-08-17 本文已影响276人
金字笙调
上一节中， 我们对于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)
}
最终效果
最后效果
千里之行，始于足下，希望我的分享能给你一些帮助，谢谢。
