D3.js学习总结(六)——基本绘制(2)

弧(饼)

弧生成器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); })
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页