弧(饼)
弧生成器d3.arc()可以生成圆形或环形的扇形。它有四个数据访问器:
- arc.innerRadius([radius])——内半径;
- arc.OuterRadius([radius])——外半径;
- startAngle([angle])——起始弧度;
- endAngle([angle])——终止弧度;
var dataset = { startAngle : 0, endAngle : Math.PI * 0.75};
// 创建一个弧生成器
var arcPath = d3.arc()
.innerRadius(50)
.outerRadius(100);
// 添加路径
svg.append("path")
.attr("d", arcPath(dataset))
.attr("transform", "translate(250,250)")
.attr("stroke", "black")
.attr("fill", "yellow");
Arc总是以坐标(0, 0)来进行绘制。如果需要指定位置,则使用transform属性进行平移。arc还有一些属性的设置,如下:
- arc.centroid(arguments…)——弧的中间点
- arc.cornerRadius([radius])——拐角的半径
- arc.padAngle([angle])和arc.padRadius([radius])——配合使用,获取或设定弧的间距。
var dataset = [
{ startAngle : 0, endAngle : Math.PI * 0.6 },
{ startAngle : Math.PI * 0.6, endAngle : Math.PI },
{ startAngle : Math.PI, endAngle : Math.PI * 1.7 },
{ startAngle : Math.PI * 1.7, endAngle : Math.PI * 2 }
];
var arcPath = d3.arc()
.innerRadius(0)
.outerRadius(100)
.cornerRadius(5); // 设置拐角的半径
var color = d3.scaleOrdinal(d3.schemeCategory10); // 定义一个10种颜色的比例尺
// 添加路径
svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("d", function(d){ return arcPath(d); })
.attr("transform", "translate(250,250)")
.attr("stroke", "black")
.attr("stroke-width", "0.5px")
.attr("fill", function(d, i){ return color(i); });
// 添加文本
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("transform", function(d){
return "translate(250, 250)" + "translate(" + arcPath.centroid(d) + ")"; // 设定文字出现在图形中心点
})
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("font-size", "15px")
.text(function(d){
return Math.floor((d.endAngle - d.startAngle) * 180 / Math.PI) + "'";
})
设定innerRadius=0的话,绘制出来的图形就是一个饼图。
假设在一个正圆(环)内我们需要划分出多个弧形,如上面的例子,那么需要根据数值占整体的比例计算出每一个的startAngle和endAngle,这很麻烦。例如我们有下面一个数组,表示各个部门的年度产值,单位是百万。var data = [1, 1, 2, 3, 5, 8, 13, 21],D3提供了一个pie()来将其自动转换为我们需要的弧度数据。如下:
var data = [1, 1, 2, 3, 5, 8, 13, 21];
var arcs = d3.pie()(data); // 根据指定的数组返回一个对象数组
console.log(arcs);
生成的对象数组包含:data(输入的原始数据)、value(当前pie的值)、index(索引)、startAngle和endAngle(起始和结束弧度)以及padAngle(相邻pie之间的间隙)。pie()不会直接绘制,有了这个数据以后,调用arc()来进行绘制。
符号
符号生成器能自动生成一些已经定义好的图形编码(符号),使用d3.symbol()创建。有两个数据访问器比较重要,分别是:
- symbol.type([type])——图形符号的类型。D3默认提供了7种图形符号:
d3.symbolCircle(圆形)
d3.symbolCross(十字)
d3.symbolDiamond(菱形)
d3.symbolSquare(正方形)
d3.symbolStar(五角星)
d3.symbolTriangle(正三角形)
d3.symbolWye(Y字形) symbol.size([size])——图形符号的大小。默认是64平方像素。
符号总是被放在原点位置,需要通过transform转换到指定的位置上面。
// 七种图形符号
var dataSymbol = [d3.symbolCircle, d3.symbolCross, d3.symbolDiamond, d3.symbolSquare,
d3.symbolStar, d3.symbolTriangle, d3.symbolWye];
// 定义符号生成器
var symbol = d3.symbol()
.size(200)
.type(function(d){ return d; });
// 定义十种颜色
var colors = d3.scaleOrdinal(d3.schemeCategory10);
// 绘制
svg.selectAll("path")
.data(dataSymbol)
.enter()
.append("path")
.attr("d", function(d){ return symbol(d); })
.attr("transform", function(d, i){
var x = 10;
var y = 10 + i * 80;
return "translate(" + x + ", " + y + ")";
})
.attr("fill", function(d, i){ return colors(i); })