D3.js 线段生成器 (V3版本)
function x(d){
return d[0] //第一个值是x坐标
} function y(d){
return d[1] //第二个值是y坐标
}
<line x1="20" y1="20" x2="300" y2="100" />
svg.append("line")
.attr("x1",20)
.attr("y1",20)
.attr("x2",300)
.attr("y2",100)
<path d="M20,20L300,100" />
svg.append("path")
.attr("d","M20,20L300,100")
//创建一个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
//创建一个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
var linePath = d3.svg.line()
.interpolate("linear-closed")
function interpolateLinear(points){
return points.join("L")
}
//创建一个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
//创建一个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
//创建一个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
//创建一个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版本)的更多相关文章
- D3.js 区域生成器 (V3版本)
区域生成器(Area Generator) 区域生成器(Area Generator)用于生成一块区域,使用方法与线段生成器类似.线段生成器地址:数据访问器有x().x0().x1().y().y ...
- D3.js 弦生成器(V3版本)
弦生成器(Chord Generator) 弦生成器(Chord Generator)根据两段弧来绘制弦,共有五个访问器,分别为source().target().radius().startAn ...
- D3.js 动画 过渡效果 (V3版本)
一 . 过渡的启动 启动过渡效果,与以下四个方法相关: d3.transition([selection],[name]) //创建一个过渡对象.但是由于每个选择集中都有transition( ...
- D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)
现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...
- 交互式数据可视化-D3.js(四)形状生成器
使用JavaScript和D3.js实现数据可视化 形状生成器 线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() ...
- D3.js的v5版本入门教程(第十三章)—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
- D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形
D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例: //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...
- D3.js的v5版本入门教程(第十一章)——交互式操作
D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...
随机推荐
- Python基础语法05--函数模块
Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也 ...
- 电脑技巧 ADSL如何远程盗号
ADSL如何远程盗号 开头语: 本文中揭露了黑客攻击ADSL用户,窃取用户名密码的常见方法,读者请勿将其用于不法用途,并提醒所有与此漏洞相关的用户尽快采取措施进行防范. ADSL作为一种宽带接入方式已 ...
- JAVA_MyEclipse如何加载Tomcat
注意Tomcat不要放到Program Files这种有空格的路径下面!,下图所示是错误的
- Linux - Unix环境高级编程(第三版) 代码编译
Unix环境高级编程(第三版) 代码编译 本文地址:http://blog.csdn.net/caroline_wendy 时间:2014.10.2 1. 下载代码:http://www.apuebo ...
- Java单例的实现
1.声明实例变量(静态) 2.私有化构造函数 3.创建获取实例的方法 public class Singleton{ //创建实例变量 private static Singleton singlet ...
- Spyder的汉化
我准备写下spyder的汉化问题:对于英文大佬,从来没得汉化问题,但是对于新手和英语差的来说,汉化还是有必要,至少用汉化过得软件能快速掌握软件等.后期会用软件了在慢慢习惯英文也不迟...哈哈哈哈.本文 ...
- delete from inner join
Update Update XXX set XXX where 这种写法大家肯定都知道,才发现update和delete居然支持inner join的update方式,这个在表间关联来做更新和删除操作 ...
- PPAPI与Browser间使用AsyncIPC通信
採用AsyncIpc这个项目(https://github.com/hicdre/AsyncIpc).来完毕PPAPI Plugin进程与Browser进程的通信. foruok原创.如需转载请关注f ...
- #import @import #include
1.在xcode5以后 ,Replace #import <Cocoa/Cocoa.h> with @import Cocoa; 在这之前 必须手动设置一下才能用. 2.#import 与 ...
- 数据库DCL、DDL、DML、DQL
SQL三部分:data manipulation language DCL: (控制)管理用户权限(GRANT.REVOKE),数据库整体配置 DDL: (定义)作用于数据库,表, ...