上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧

在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢?

设置填充样式

这里设置我们填充区域的样式,我们使用浅蓝色进行填充:

.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); });

那么,我们将得到基于线条的上面部分的填充:
 
下节我们将学习如何往图表中绘制多条线条!

D3.js学习(四)的更多相关文章

  1. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  2. D3.js学习笔记(四)—— 使用SVG坐标空间

    目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...

  3. D3.js学习(一)

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  4. D3.js学习记录【转】【新】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  6. d3.js学习笔记(五)——将数据结构化为D3.js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  7. D3.js学习笔记(一)——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

  8. D3.js学习(七)

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  9. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. D3.js学习笔记(三)——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

随机推荐

  1. java 集合

    1. 2.for循环的时候会改变角标,所以删除需要--,增加需要++ 3.去除重复元素2(用的实质都是对象的equals方法) 4.Treeset 里面的add方法 5.treeSet里面addstu ...

  2. [LeetCode] Find All Duplicates in an Array 找出数组中所有重复项

    Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others ...

  3. [LeetCode] H-Index 求H指数

    Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...

  4. .NET跨平台之旅:探秘 dotnet run 如何运行 .NET Core 应用程序

    自从用 dotnet run 成功运行第一个 "Hello world" .NET Core 应用程序后,一直有个好奇心:dotnet run 究竟是如何运行一个 .NET Cor ...

  5. 理解 JavaScript 回调函数并使用

    JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...

  6. 5G系统架构

    原文标题:迈向5G之路,颠覆性的5G系统架构?   本文部分图片,资料摘自<迈向5G C-RAN:需求.架构与挑战> 突如一夜春风来,随着Polar码与LDPC码作为5G编码候选方案,通信 ...

  7. iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView

    iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView 时间:2016-01-19 19:13:43      阅读:630      评论:0      收藏:0   ...

  8. caffe源码解析

    http://blog.csdn.net/lanxuecc/article/details/53186613

  9. vue.js之过渡效果-css

    概述 vuejs的过渡效果可以让我们的页面元素在出现和消失时实现过渡.官方文档这样描述过渡效果的方式: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Anima ...

  10. git的基本介绍和使用

    前言:从事iOS开发一年多以来,一直使用svn管理源代码.对svn的特点和弊端已经深有体会.前些天双十二前后,项目工期紧张到爆,起早贪黑的加班,可谓披星戴月,这还不止,回到家中还要疯狂的敲代码.那么问 ...