弧（饼）
弧生成器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); })
3224
