线段生成器
与线段生成器相关的方法:
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. Python基础语法05--函数模块

    Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也 ...

  2. 电脑技巧 ADSL如何远程盗号

    ADSL如何远程盗号 开头语: 本文中揭露了黑客攻击ADSL用户,窃取用户名密码的常见方法,读者请勿将其用于不法用途,并提醒所有与此漏洞相关的用户尽快采取措施进行防范. ADSL作为一种宽带接入方式已 ...

  3. JAVA_MyEclipse如何加载Tomcat

          注意Tomcat不要放到Program Files这种有空格的路径下面!,下图所示是错误的      

  4. Linux - Unix环境高级编程(第三版) 代码编译

    Unix环境高级编程(第三版) 代码编译 本文地址:http://blog.csdn.net/caroline_wendy 时间:2014.10.2 1. 下载代码:http://www.apuebo ...

  5. Java单例的实现

    1.声明实例变量(静态) 2.私有化构造函数 3.创建获取实例的方法 public class Singleton{ //创建实例变量 private static Singleton singlet ...

  6. Spyder的汉化

    我准备写下spyder的汉化问题:对于英文大佬,从来没得汉化问题,但是对于新手和英语差的来说,汉化还是有必要,至少用汉化过得软件能快速掌握软件等.后期会用软件了在慢慢习惯英文也不迟...哈哈哈哈.本文 ...

  7. delete from inner join

    Update Update XXX set XXX where 这种写法大家肯定都知道,才发现update和delete居然支持inner join的update方式,这个在表间关联来做更新和删除操作 ...

  8. PPAPI与Browser间使用AsyncIPC通信

    採用AsyncIpc这个项目(https://github.com/hicdre/AsyncIpc).来完毕PPAPI Plugin进程与Browser进程的通信. foruok原创.如需转载请关注f ...

  9. #import @import #include

    1.在xcode5以后 ,Replace #import <Cocoa/Cocoa.h> with @import Cocoa; 在这之前 必须手动设置一下才能用. 2.#import 与 ...

  10. 数据库DCL、DDL、DML、DQL

    SQL三部分:data manipulation language      DCL: (控制)管理用户权限(GRANT.REVOKE),数据库整体配置      DDL: (定义)作用于数据库,表, ...