zoukankan      html  css  js  c++  java
  • d3.svg.line() 曲线构造器

    曲线构造器(注意,这指的是line()返回的结果)是一个函数,它要求调用者传入一个数组。 默认情况下,数组的每一项应当是一个包含x、y坐标的数组,第一个值代表x,第二个值代表y。比如:

    1. var line = d3.svg.line();
    2. var d = line([[10,20],[20,30],[50,70],[100,60]]);

    提醒一下,尽管称为line,但是这个方法实际和SVG的line元素毫无关系。

    试着查看下→_→代码中line(data)返回的内容,努力记住,line()方法返回的是一个函数!

    使用x,y访问器

    很多情况下,我们的数据模型不符合曲线构造器的要求。比如:

    1. var data=[
    2. {year:1981,yield:129303},
    3. {year:1982,yield:901234},
    4. ......
    5. ];

    这时可以使用构造器的x、y访问器函数告诉构造如何访问我们的数据:

    1. line.x([x_accessor])
    2. line.y([y_accessor])

    构造器会将数据集中的每一个数据传入访问器函数,并使用其返回值作为 x坐标或y坐标:

    1. var line = d3.svg.line()
    2. .x(function(d){return d.year;})
    3. .y(function(d){return d.yield;});
    4. var d = line(data);

    定义插值策略

    我们为曲线构造器仅仅指定了一些关键点,中间点的计算是曲线构造器完成的,这个 过程就是插值

    曲线构造器默认的插值模式是线性插值,所以我们看到一些直线段将我们提供 的各个点连接起来。

    使用intepolation()方法,可以告诉构造器使用不同的插值策略:

    1. line.interpolate([interpolate])

    如果inerpolate参数是一个字符串,表示要求构造器使用一个预置的插值 策略,可以是:

    • linear - 线性插值
    • linear-closed - 线性插值,封闭起点和终点形成多边形
    • step - 步进插值,曲线只能沿x轴和y轴交替伸展
    • step-before - 步进插值,曲线只能沿y轴和x轴交替伸展
    • step-after - 同step
    • basis - B样条插值
    • basis-open - B样条插值,起点终点不相交
    • basis-closed - B样条插值,连接起点终点形成多边形
    • bundle - 基本等效于basis,除了有额外的tension参数用于拉直样条
    • cardinal - Cardina样条插值
    • cardinal-open - Cardina样条插值,起点终点不相交
    • cardinal-closed - Cardina样条插值,连接起点终点形成多边形
    • monotone - 立方插值,保留y方向的单调性

    interpolate参数也可以是一个函数,这个函数接受传入的数据点集,返回 path的d字符串。我们先无视掉。

  • 相关阅读:
    正则表达式的一些符号
    备份 Repository Backup
    Delphi 文件类型
    superobject.pas 其他人修改的
    TCustomCombo.SetItemIndex(const Value: Integer);
    Error reading symbol file
    任务栏窗口列表
    找回已删除的文件或目录
    总目录
    在Mac下使用crontab执行定时脚本
  • 原文地址:https://www.cnblogs.com/0769fe/p/6558436.html
Copyright © 2011-2022 走看看