线段生成器
与线段生成器相关的方法:
d3.svg.line()
//创建一个线段生成器。
 
line(data)
//使用线段生成器绘制data数据。
 
line.x([x])
//设置或获取线段x坐标的访问器,即使用什么数据作为线段的x坐标。
 
line.y([y])
//同上。设置或获取y坐标的访问器。
 
line.interpolate([interpolate])
//设置或获取线段的插值模式,共有13种。
 
line.tension([tension])
//设置或获取张力系数,当插值模式为cardinal、cardinal-open、cardinal-closed的时候有效。
 
line.defined([defined])
//设置或获取一个访问器,用于确认线段是否存在,只有判定为存在的数据才会被绘制。
 
line.xline.y可制定规则:如何从数据中获取x和y坐标。这种方法称为访问器
 
line.xline.y的默认为:
 function x(d){
return d[0]       //第一个值是x坐标
} function y(d){
return d[1]       //第二个值是y坐标
}
在SVG区域里,线段元素是: 

 <line x1="20" y1="20" x2="300" y2="100" />
添加元素时,可以使用append(),再设置属性,如: 
 
  svg.append("line")
.attr("x1",20)
.attr("y1",20)
.attr("x2",300)
.attr("y2",100)
 
还有一种添加直线的方法:使用路径元素<path>。路径元素也是可以绘制直线的,例如,相同的直线可用:
 
 <path d="M20,20L300,100" />
 
换成D3添加元素的方式,代码:
 
 svg.append("path")
.attr("d","M20,20L300,100")
这样做虽然是成功绘制了该路径,但有一个问题:类似M20,20L300,100的字符串,是怎么得到的呢?此处只有两个点,可以手动输入。如果有成百上千各店,全部手动输入,不太方便也不太现实。因此D3中引入了路径生成器(Path Generator)的概念,能够自动根据数据生成路径。用于生成线段的程序,叫做线段生成器(Line Generator)
 
线段生成器由d3.svg.line()创建,先看一个简单的例子:
 
 //创建一个svg画图区域
var svg = d3.select("#body")
.append("svg")
.attr("width",600)
.attr("height",400) //线段的点数据,每一项是一个点的x和y坐标
var lines = [[80,80],[200,100],[200,200],[100,200]]
//创建一个线段生成器
var linePath = d3.svg.line() //添加路径
svg.append("path")
.attr("d",linePath(lines)) //使用了线段生成器
.attr("stroke","black") //线的颜色
.attr("stroke-width","3px") //线的宽度
.attr("fill","none") //填充颜色为none
线段的数据有四个点,保存在变量lines里。线段生成器保存在变量linePath里,如此linePath可当做函数使用:linePath(lines)根据数据lines生成路径。结果是一段折现。效果图: 
 
 
根据上面的例子,我们对x和y访问器做一些修改:
 
  //创建一个svg画图区域
var svg = d3.select("#body")
.append("svg")
.attr("width",600)
.attr("height",400) var lines = [80,120,160,200,240,280]
var linePath = d3.svg.line()
.x(function(d){return d})
.y(function(d,i){
return i%2 == 0? 40 : 120
}) //添加路径
svg.append("path")
.attr("d",linePath(lines)) //使用了线段生成器
.attr("stroke","black") //线的颜色
.attr("stroke-width","3px") //线的宽度
.attr("fill","none") //填充颜色为none
 
如此,调用linePath(lines)所得的路径中,各顶点为:(80,40)、(120,120)、(160,40)、(200,120)、(240,40)、(280,120)。以第一个点为例讲一下:
x = 80 (d等80)
y = 0 % 2 == 0 ? 40 : 120 (i等于0,最终表达式的值为40)
以此类推,可计算得到各坐标点。结果如图: 
 
 
线段生成器是有插值模式的,根据模式的不同,线段的形式(路径)会发生很大的变化。更有13中模式,如linearlinear-closedstepbasisbundlecardinalcardinal-opencardinal-closedmonotone等。设置方法如下:
 
 var linePath = d3.svg.line()
.interpolate("linear-closed")
 
插值模式,指的是对于线段两个端点之间的值如何计算。默认的插值模式是linear,即线性的。interpolate的参数,除预定义的13种模式之外,还可以是一个自己定义的函数。接下来看看线性插值模式(linear)的实现方法:
 
 function interpolateLinear(points){
return points.join("L")
}
 
意思是:对于所有的顶点,在顶点数值之间插入一个L作为分隔。其他所有的模式都是使用类似的手法实现的。如下图展示了不同插值模式下线段的形态,虽然有些已经不是"线段"了,但都是根据线段的顶点生成的。当插值模式为cardinalcardinal-opencardinal-closed的时候,可是使用tension()设置张力系数。代码:
 
step插值模式 :
 
  //创建一个svg画图区域
var svg = d3.select("#body")
.append("svg")
.attr("width",600)
.attr("height",400) //step插值模式
var lines = [80,120,160,200,240,280]
var linePath = d3.svg.line()
.interpolate("step")
.x(function(d){return d})
.y(function(d,i){
return i%2 == 0? 40 : 120
}) //添加路径
svg.append("path")
.attr("d",linePath(lines)) //使用了线段生成器
.attr("stroke","black") //线的颜色
.attr("stroke-width","3px") //线的宽度
.attr("fill","none") //填充颜色为none
 
效果图:
 
 
basis插值模式 :
 
 //创建一个svg画图区域
var svg = d3.select("#body")
.append("svg")
.attr("width",600)
.attr("height",400) //basis插值模式
var lines = [80,120,160,200,240,280]
var linePath = d3.svg.line()
.interpolate("basis")
.x(function(d){return d})
.y(function(d,i){
return i%2 == 0? 40 : 120
}) //添加路径
svg.append("path")
.attr("d",linePath(lines)) //使用了线段生成器
.attr("stroke","black") //线的颜色
.attr("stroke-width","3px") //线的宽度
.attr("fill","none") //填充颜色为none
 
效果图:
 
 
cardinal插值模式 :
 
  //创建一个svg画图区域
var svg = d3.select("#body")
.append("svg")
.attr("width",600)
.attr("height",400) //cardinal插值模式
var lines = [80,120,160,200,240,280]
var linePath = d3.svg.line()
.interpolate("cardinal")
.x(function(d){return d})
.y(function(d,i){
return i%2 == 0? 40 : 120
}) //添加路径
svg.append("path")
.attr("d",linePath(lines)) //使用了线段生成器
.attr("stroke","black") //线的颜色
.attr("stroke-width","3px") //线的宽度
.attr("fill","none") //填充颜色为none
 
效果图 :
 
 
 
 
 
 
如果选择性的使用顶点数据,可用defined()。举个例子: 
 

   //创建一个svg画图区域
var svg = d3.select("#body")
.append("svg")
.attr("width",600)
.attr("height",400) //选择性的使用顶点数据
var lines = [80,120,160,200,240,280]
var linePath = d3.svg.line()
.x(function(d){return d})
.y(function(d,i){
return i%2 == 0 ? 40 : 120
})
.defined(function(d){
return d < 200
}) //添加路径
svg.append("path")
.attr("d",linePath(lines)) //使用了线段生成器
.attr("stroke","black") //线的颜色
.attr("stroke-width","3px") //线的宽度
.attr("fill","none") //填充颜色为none

效果图 :

 
 
 
 
 
 
 

D3.js 线段生成器 (V3版本)的更多相关文章

  1. D3.js 区域生成器 (V3版本)

    区域生成器(Area Generator)   区域生成器(Area Generator)用于生成一块区域,使用方法与线段生成器类似.线段生成器地址:数据访问器有x().x0().x1().y().y ...

  2. D3.js 弦生成器(V3版本)

    弦生成器(Chord Generator)   弦生成器(Chord Generator)根据两段弧来绘制弦,共有五个访问器,分别为source().target().radius().startAn ...

  3. D3.js 动画 过渡效果 (V3版本)

    一 . 过渡的启动   启动过渡效果,与以下四个方法相关:   d3.transition([selection],[name]) //创建一个过渡对象.但是由于每个选择集中都有transition( ...

  4. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

  5. 交互式数据可视化-D3.js(四)形状生成器

    使用JavaScript和D3.js实现数据可视化 形状生成器 线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() ...

  6. D3.js的v5版本入门教程(第十三章)—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  7. D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  8. D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图

    本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例:   //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...

  9. D3.js的v5版本入门教程(第十一章)——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

随机推荐

  1. 用户空间&内核空间学习 & top命令 & time命令

    参考了这篇文章 http://www.ruanyifeng.com/blog/2016/12/user_space_vs_kernel_space.html 简单说,Kernel space 是 Li ...

  2. docker on UP Board

    前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的图片.链接,请访问我的博客: http://www.cnblogs.co ...

  3. 函数柯里化 curry

    一.函数柯里化的特性: (1)参数复用 $.ajax // 示例一 function ajax(type,url,data) { var xhr = new XMLHttpRequest(); xhr ...

  4. 创建JDBC模板简化代码、JDBC应用的事务管理以及连接池的作用

    一.创建JDBC模板简化代码 一个简单的查询.要做这么一大堆事情,并且还要处理异常,我们不防来梳理一下: 1.获取connection  2.获取statement  3.获取resultset  4 ...

  5. linux 文件记录锁详解

    一: linux记录锁更恰当的称呼应该是范围锁,它是对文件某个范围的锁定. 关于记录锁的功能就是fcntl提供的第五个功能,具体使用如下: int fcntl(int fd, int cmd, str ...

  6. HDU 5188 背包

    有N道题.要求得到最少W分 给出N道题的:每道题用时T.分数V,应在且必须在L时刻提交才干得分 问得到W分所用的最少的时间 以L-T排序,然后做01背包就可以 #include "stdio ...

  7. ACM在线题库

    现在网上有许多题库,大多是可以在线评测,所以叫做Online Judge.除了USACO是为IOI准备外,其余几乎全部是大学的ACM竞赛题库. USACO http://ace.delos.com/u ...

  8. Vue 之 npm 及 安装的包

    1  npm相关 1.1 npm 是 基于Node.js 的,所以要先安装Node.js 在浏览器地址栏输入https://nodejs.org/en/, 进入Node.js官网后,点击下载左边的稳定 ...

  9. 【bzoj4554】[Tjoi2016&Heoi2016]游戏

    现在问题有硬石头和软石头的限制 所以要对地图进行预处理 分行做,把有#隔开的*(x)形成联通块的存储下来. 分列作,把有#隔开的*(x)形成联通块的存储下来. 求出所有的行联通个数和列联通个数 作为二 ...

  10. kill 挂起 Apache Web Server

    [root@hadoop1 ~]# kill -l 1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP 6) SIGABRT 7) SIGBUS 8 ...