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版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...
随机推荐
- 用户空间&内核空间学习 & top命令 & time命令
参考了这篇文章 http://www.ruanyifeng.com/blog/2016/12/user_space_vs_kernel_space.html 简单说,Kernel space 是 Li ...
- docker on UP Board
前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的图片.链接,请访问我的博客: http://www.cnblogs.co ...
- 函数柯里化 curry
一.函数柯里化的特性: (1)参数复用 $.ajax // 示例一 function ajax(type,url,data) { var xhr = new XMLHttpRequest(); xhr ...
- 创建JDBC模板简化代码、JDBC应用的事务管理以及连接池的作用
一.创建JDBC模板简化代码 一个简单的查询.要做这么一大堆事情,并且还要处理异常,我们不防来梳理一下: 1.获取connection 2.获取statement 3.获取resultset 4 ...
- linux 文件记录锁详解
一: linux记录锁更恰当的称呼应该是范围锁,它是对文件某个范围的锁定. 关于记录锁的功能就是fcntl提供的第五个功能,具体使用如下: int fcntl(int fd, int cmd, str ...
- HDU 5188 背包
有N道题.要求得到最少W分 给出N道题的:每道题用时T.分数V,应在且必须在L时刻提交才干得分 问得到W分所用的最少的时间 以L-T排序,然后做01背包就可以 #include "stdio ...
- ACM在线题库
现在网上有许多题库,大多是可以在线评测,所以叫做Online Judge.除了USACO是为IOI准备外,其余几乎全部是大学的ACM竞赛题库. USACO http://ace.delos.com/u ...
- Vue 之 npm 及 安装的包
1 npm相关 1.1 npm 是 基于Node.js 的,所以要先安装Node.js 在浏览器地址栏输入https://nodejs.org/en/, 进入Node.js官网后,点击下载左边的稳定 ...
- 【bzoj4554】[Tjoi2016&Heoi2016]游戏
现在问题有硬石头和软石头的限制 所以要对地图进行预处理 分行做,把有#隔开的*(x)形成联通块的存储下来. 分列作,把有#隔开的*(x)形成联通块的存储下来. 求出所有的行联通个数和列联通个数 作为二 ...
- kill 挂起 Apache Web Server
[root@hadoop1 ~]# kill -l 1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP 6) SIGABRT 7) SIGBUS 8 ...