D3.js 区域生成器 (V3版本)
2024-10-07 17:35:45
区域生成器(Area Generator)
区域生成器(Area Generator)用于生成一块区域,使用方法与线段生成器类似。线段生成器地址:数据访问器有x()、x0()、x1()、y()、y0()、y1()六个,数量很多,但不许要全部使用。举个例子:
var width = 600; //SVG绘制区域的宽度
var height = 500; //SVG绘制区域的高度 //定义画图区域svg
var svg = d3.select("#body")
.append("svg")
.attr("width",width)
.attr("height",height) //定义数据
var dataList = [80,120,130,70,60,90]
//创建一个区域生成器
var areaPath = d3.svg.area()
.x(function(d,i){return 50 + i * 80})
.y0(function(d,i){return height/2})
.y1(function(d,i){return height/2 - d}) //添加路径
svg.append("path")
.attr("d",areaPath(dataList)) //使用了区域生成器
.attr("stroke","black") //线段的颜色
.attr("stroke-width","3px") //线段的宽度
.attr("fill","yellow") //填充的颜色
上面代码定义了一个数组dataList和一个区域生成器areaPath。此区域生成器定制了三个访问器:x()、y0()、y1()。将areaPath当中函数使用,areaPath(dataList)返回的字符串直接作为<path>元素的d的值使用。结果如图:
上图中,上边界的折现是数组dataList中各值得反映。根据访问器的设定,可得到以下数值(height的值是500)
当d = 80,i = 0 时,x等于50, y0等于250, y1等于170。
当d = 120,i = 1 时,x等于50 + 1 * 80, y0等于250, y1等于130。
以此类推。
下图展示了各访问器的意义,x是各段的x坐标,y0是区域的下限坐标,y1是区域的上限坐标。如果不定制访问器,默认是:
x为d[0],y0为0,y1为d[1]。此外还有x0()、x1()、y()三个访问器,意义类似,如果需要制作上图的横向图需要用到。
与线段生成器类似,区域生成器也有interpolate()、tension()、defined()这些方法,意义相同。通过设定interpolate,两点之间的插值会发生相应变化,规则与线段生成器一样。但是,某些模式是区域生成器里没有的,如linear-closed。因为区域本身就是闭合的,所以不需要了。接下来给大家展示一下step和basis两种插值模式:
step插值模式 :
var width = 600; //SVG绘制区域的宽度
var height = 500; //SVG绘制区域的高度 //定义画图区域svg
var svg = d3.select("#body")
.append("svg")
.attr("width",width)
.attr("height",height) //定义数据
var dataList = [80,120,130,70,60,90] //step插值模式
var areaPath = d3.svg.area()
.interpolate("step")
.x(function(d,i){return 50 + i * 80})
.y0(function(d,i){return height/2})
.y1(function(d,i){return height/2-d}) //添加路径
svg.append("path")
.attr("d",areaPath(dataList)) //使用了区域生成器
.attr("stroke","black") //线段的颜色
.attr("stroke-width","3px") //线段的宽度
.attr("fill","yellow") //填充的颜色
效果图 :
basis插值模式 :
var width = 600; //SVG绘制区域的宽度
var height = 500; //SVG绘制区域的高度 //定义画图区域svg
var svg = d3.select("#body")
.append("svg")
.attr("width",width)
.attr("height",height) //定义数据
var dataList = [80,120,130,70,60,90] //basis插值模式
var areaPath = d3.svg.area()
.interpolate("basis")
.x(function(d,i){return 50 + i * 80})
.y0(function(d,i){return height/2})
.y1(function(d,i){return height/2 - d}) //添加路径
svg.append("path")
.attr("d",areaPath(dataList)) //使用了区域生成器
.attr("stroke","black") //线段的颜色
.attr("stroke-width","3px") //线段的宽度
.attr("fill","yellow") //填充的颜色
效果图 :
在需要生成折现或曲线下方的面积的时候,可以考虑使用区域生成器。
最新文章
- ORM
- 【BZOJ】1491: [NOI2007]社交网络(floyd)
- 使用水晶报表更新后出现“值不能为 null。 参数名: inputString”
- python练习程序(c100经典例3)
- CF 258B Little Elephant and Elections [dp+组合]
- JavaScript 运用ES2015特性的小项目
- SQLAlchemy 教程 —— 基础入门篇
- 仓储repository概念
- Scala--控制结构和函数
- SQL server 行转列 列转行
- 高版本mysql8.0解压版安装步骤
- Python全栈之路----目录
- python数学第七天【期望的性质】
- ssdb主从及双主模型配置和简单管理
- 【转】C语言宏高级用法 [总结]
- 关于iphone6/5/4s 在iOS8.0系统下 仅仅读@3x图片
- Requests+正则表达式爬取猫眼电影
- JAVA 图形开发中组件对齐方法及界面开发
- 详解 Python3 正则表达式(五)
- DropDownList绑定数据的几种方式
热门文章
- shell编程:有类型的变量
- docker使用entrypoint执行时报permission denied错误
- cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用)
- AD库转换为KiCAD库的方法
- update 后没有加where条件解决办法
- 单核cpu实现多任务原理
- Splay(区间翻转)&;树套树(Splay+线段树,90分)
- Python排序功能进阶
- JS数组 Array
- 【leetcode】538. Convert BST to Greater Tree