D3.js学习总结(五)——基本绘制(1)

线段

在SVG中,线段的元素是<line>,或者<path>也可以绘制线段。所以d3代码为如下形式:

// line形式添加线段
svg.append("line")
        .attr("x1", 20).attr("y1", 20)
        .attr("x2", 300).attr("y2", 100)
        .attr("stroke", "black");
// path形式添加线段
svg.append("path")
        .attr("d", "M20,20L300,100")
        .attr("stroke", "black");

如果存在多个点的情况,可以使用d3的“line生成器”。如下:

// 线段的点数据,每一项是一个点的X和Y坐标
var points = [[80, 80], [200, 100], [200, 200], [100, 200]];

// 创建一个线段生成器
var linePath = d3.line();

// 添加路径
svg.append("path")
        .attr("d", linePath(points))
        .attr("stroke", "black")
        .attr("fill", "none");
  • d3.line()——创建一个线段生成器;
  • line(data)——使用指定的数据生成一条线,给定的数据顺序应该按照x值排序好;
  • line.x([x])——设置或获取线段的x坐标访问器;
  • line.y([y])——设置或获取线段的y坐标访问器;
  • line.defined([defined])——设置或获取defined访问器,这个访问器用于指定在数据缺失的时候该如何操作。默认的访问器假定所有的输入数据都是正义的;
  • line.curve([curve])——设置线段的曲线模式,即两个点之间如何连接。默认为curveLinear(线性插值,折线模式);

line.x()和line.y()是访问器,用于获取数据。默认定义如下:

.x(function(d){ return d[0]; })
.y(function(d){ return d[1]; })

也可以自定义需要返回的数据,如下:

var linePath = d3.line()
        .x(function(d){ return d[0]; })
        .y(function(d, i){ return i%2==0 ? 40 : 120; })

defined()默认返回为true,即所有的点都认为是需要绘制的。可以通过defined()来筛除不需要的数据。例如:

var linePath = d3.line()
        .defined(function(d){
           if(d[0] >= 100){ return true; }
        });

上面的代码就把第一个点给排除了,不再绘制。
line.curve()设置曲线模式,默认为line.curve(d3. curveLinear),即点之间以直线相连。曲线模式包括:

  • d3.curveLinear——线性插值,那就是折线;
    这里写图片描述

  • d3.curveLinearClosed——闭合的折线
    这里写图片描述

  • d3.curveMonotoneX——生成一个在y方向保持单调性的曲线;
    这里写图片描述

  • d3.curveMonotoneY——生成一个在x方向保持单调性的曲线
    这里写图片描述

  • d3.curveNatural——生成一个“自然的三次曲线”,曲线在终点的二阶导数为0;
    这里写图片描述

  • d3.curveStep——台阶状的折线。y值在两个相邻的点x值中间点发生变化;
    这里写图片描述

  • d3.curveStepAfter——台阶状(step function)的折线,注意y值变化的位置;
    这里写图片描述

  • d3.curveStepBefore——台阶状(step function)的折线,注意y值变化的位置;
    这里写图片描述

区域

如同线段的生成,D3提供了区域生成器d3.area()来定义个区域。对于线段来说,需要提供点的x坐标和y坐标。所以,d3.line()有两个数据访问器x()和y()。而对于area()来说,有六个数据访问器,分别是:
第一组:x,y0,y1;
第二组:y,x0,x1;

从二维的角度来说,区域是由两条边界线闭合而成的,边界线可以是曲线也可以是直线。无论哪种形式,通常来说两条线共享一个x坐标,所不同的只是y坐标(即y0和y1)。如下图所示:
这里写图片描述

所以我们在定义区域的时候,需要定义这三个数据访问器该如何取值。以y轴为基准来说,共享的就是y坐标,不同的是x坐标(x0和x1)。通常来说,y0是一个常量。如下代码:

var dataset = [80, 120, 130, 70, 60, 90];

// 创建一个区域生成器
var areaPath = d3.area()
        .x(function(d, i){ return 50+i*80; })
        .y0(function(d, i){ return height/2; })
        .y1(function(d, i){ return height/2-d; });

// 添加路径
svg.append("path")
        .attr("d", areaPath(dataset))
        .attr("stroke", "black")
        .attr("fill", "yellow");

和线段一样,也有area.curve()来设置插值模式。

评论 1 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

黄金安魂曲

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值