D3.js学习(四)
2024-10-19 11:54:35
上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧
在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢?
设置填充样式
这里设置我们填充区域的样式,我们使用浅蓝色进行填充:
.area{
fill: lightsteelblue;
stroke-width: 0;
}
定义填充区域
就像前面绘制线条之前一样,我们首先要对其进行定义
//定义填充区域
var area = d3.svg.area()
.x(function(d){ return x(d.date); })
.y0(height)
.y1(function(d){ return y(d.close); });
其实定义填充区域跟前面我们定义绘制线条函数特别像,不知道大家发现没有呢? 在这里,多的只是y0(height),如果我们把填充区域看做是由一条条垂直方向上的线条组成的话那就好理解了,这个y0,y1实际上就是组成整个区域的这些线的两个端点,y0(height)表示从x轴开始到与线条的交点处结束。可以用图来说明:
我们可以在定义玩坐标轴之后立即定义这个填充区域,就像这样:
绘制填充区域
前面对填充区域定义了之后,我们拿它来绘制填充区域了
//Get the data
d3.tsv("../data/data.tsv", function(error, data){
....
//绘制填充区域
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
....
这样,我们的填充就已经完成了, 另外,如果我们改变前面的填充区域的定义:
//定义填充区域
var area = d3.svg.area()
.x(function(d){ return x(d.date); })
.y0(0)
.y1(function(d){ return y(d.close); });
那么,我们将得到基于线条的上面部分的填充:
下节我们将学习如何往图表中绘制多条线条!
最新文章
- Using MySQL Connector .NET 6.6.4 with Entity Framework 5
- 在Ubuntu16.04集群上手工部署Kubernetes(未完,陆续补充中)
- Objective-C基础2
- 查看MySql中每个IP的连接数
- CRM odata方法 js容易出现的错误,大小写区分 Value Id
- 轻量级数据库sqlite的接口说明
- Learning from the CakePHP source code - Part I
- HubbleDotNet 最新绿色版,服务端免安装,基于eaglet 最后V1.2.8.9版本开发,bug修正,支持一键生成同步表
- node20180927
- 白盒测试实践-day01
- 转:Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)
- mongoose findByIdAndUpdate不执行的解决方法
- Windows 启用/禁用内置管理员 Administrator
- Activiti图表bpmn对应的xml文件
- 浅谈log4j-2
- 当别人给你一个wsdl或者webservice接口时
- Spring cloud 微服务架构 Eureka篇
- Dailu Scrum (2015/10/27)
- 【POJ】1840:Eqs【哈希表】
- css 动画
热门文章
- Boolean()值为false的五个特殊值
- [LeetCode] Sqrt(x) 求平方根
- Asp.net 后台添加CSS、JS、Meta标签
- 实现数据库的跨库join
- java版简易socket客户端
- bzoj 3676 回文串 manachar+hash
- Javascript中两个等于号和三个等于号的区别(==/===)
- Linux 下 ---ThinkPHP 图片上传提示:上传根目录不存在!请尝试手动创建
- IDEA中maven搭建Spring+SpringMVC+mybatis项目
- Python学习总结 03 Plotly 学习总结