<!-- area的例子
csv使用node.js提供的 -->

<!DOCTYPE html>

<meta charset="utf-8">

<style>

svg {

  font: 10px sans-serif;

}

path {

  fill: steelblue;

}

.axis path,

.axis line {

  fill: none;

  stroke: #000;

  shape-rendering: crispEdges;

}

.brush .extent {

  stroke: #fff;

  fill-opacity: .125;

  shape-rendering: crispEdges;

}

</style>

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var margin = {top: 10, right: 10, bottom: 100, left: 40},

    margin2 = {top: 430, right: 10, bottom: 20, left: 40},

    width = 960 - margin.left - margin.right,

    height = 500 - margin.top - margin.bottom,

    height2 = 500 - margin2.top - margin2.bottom;

var parseDate = d3.time.format("%b %Y").parse; 

var x = d3.time.scale().range([0, width]),

    x2 = d3.time.scale().range([0, width]),

    y = d3.scale.linear().range([height, 0]),

    y2 = d3.scale.linear().range([height2, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom"),

    xAxis2 = d3.svg.axis().scale(x).orient("bottom"),

    yAxis = d3.svg.axis().scale(y).orient("left");

var area=d3.svg.area()

         .interpolate("monotone")  //这里教程没有写

         .x(function(d){return x(d.date);})  //很容易写成data

         .y0(height)

         .y1(function(d){return y(d.price);})

         ;

var area2=d3.svg.area()

         .interpolate("monotone")

         .x(function(d){return x2(d.date);})

         .y0(height2)

         .y1(function(d){return y2(d.price);})

         ;

var svg=d3.select('body').append('svg')

        .attr({

         'width':width+margin.left+margin.right,

         'height':height+margin.top+margin.bottom

        })

var focus=svg.append('g')

       .attr('transform','translate('+margin.left+','+margin.top+')')

       ;

var context=svg.append('g')

       .attr('transform','translate('+margin2.left+','+margin2.top+')')

       ;

d3.csv('data.csv',function(error,data){

   data.forEach(function(d){

     d.date = parseDate(d.date);

     d.price=+d.price;

   });

 x.domain(d3.extent(data.map(function(d){return d.date;})));

 y.domain([0,d3.max(data.map(function(d){return d.price;}))]);

 x2.domain(x.domain());  //这里没有加（）

 y2.domain(y.domain());

 focus.append('path')

    .datum(data)

    .attr('d',area)

    ;

 focus.append('g')

    .attr('class','x axis')

    .attr('transform','translate(0,'+height+')')

    .call(xAxis)

    ;

 focus.append('g')

    .attr('class','y axis')

    .call(yAxis)

    ;

 context.append('path')

    .datum(data)

    .attr('d',area2)

    ;

 context.append('g')

    .attr('class','x axis')

    .attr('transform','translate(0,'+height2+')')

    .call(xAxis2)

    ;

});

</script>

D3_book 7 area的更多相关文章

  1. [转]NopCommerce How to add a menu item into the administration area from a plugin

    本文转自:http://docs.nopcommerce.com/display/nc/How+to+code+my+own+shipping+rate+computation+method Go t ...

  2. ASP.NET MVC系列：Area

    1. Area简介 ASP.NET MVC Area机制构建项目,可以将相对独立的功能模块切割划分,降低项目的耦合度. 2. Area设置Routing 新建Admin Area后,自动创建Admin ...

  3. Web API项目中使用Area对业务进行分类管理

    在之前开发的很多Web API项目中,为了方便以及快速开发,往往把整个Web API的控制器放在基目录的Controllers目录中,但随着业务越来越复杂,这样Controllers目录中的文件就增加 ...

  4. MVC View中获取action、controller、area名称

    获取控制器名称: ViewContext.RouteData.Values["controller"].ToString(); 获取Action名称: ViewContext.Ro ...

  5. [LeetCode] Rectangle Area 矩形面积

    Find the total area covered by two rectilinear rectangles in a2D plane. Each rectangle is defined by ...

  6. 如何在Linux上使用文件作为内存交换区(Swap Area)

    交换区域(Swap Area)有什么作用? 交换分区是操作系统在内存不足(或内存较低)时的一种补充.通俗的说,如果说内存是汽油,内存条就相当于油箱,交换区域则相当于备用油箱. Ubuntu Linux ...

  7. MVC 添加Area

    在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下: 项目 –> 添加 -> 区域 ( Area ) 输入 Admin 添加成功后 Area包含: 创建一个 ...

  8. ASP.NET MVC 设置Area中 Controller 的方法 默认启动页

    MVC中通常分区域编程,互不干扰,如果需要设置某个区域下面的某个控制器下面的某个方法为默认启动页的话,直接修改项目的路由如下: public static void RegisterRoutes(Ro ...

  9. [ASP.NET MVC 小牛之路]08 - Area 使用

    ASP.NET MVC允许使用 Area(区域)来组织Web应用程序,每个Area代表应用程序的不同功能模块.这对于大的工程非常有用,Area 使每个功能模块都有各自的文件夹,文件夹中有自己的Cont ...

随机推荐

  1. Mysql delete操作

    以下摘自官方文档:https://dev.mysql.com/doc/refman/5.7/en/insert.html 语法: DELETE [LOW_PRIORITY] [QUICK] [IGNO ...

  2. easyUIDataGrid分页

    package com.cn.eport.util; import java.util.List; /** * * * @author zh * */ public class DataGrid im ...

  3. MongoDB 分片副本集集群搭建

    配置准备 三台机器: A(193.168.10.101) B(193.168.10.102) C(193.168.10.103) MongoDB 安装目录:/usr/local/mongodb Mon ...

  4. Java连接MySQL数据库及操作

    Java操作MySQL数据库,需要驱动mysql-connector-java 来进行操作,去下载对应的jar包   一.导入需要的jar包 我用的是maven对包进行管理,在maven中添加如下内容 ...

  5. 自定义事件 js

    // 原理如下// 创建 类型为HTMLEvents的事件 var evt = document.createEvent("HTMLEvents"); // 初始化 自定义eee ...

  6. ALL ANY SOME 这样解释好理解很多

    --All:对所有数据都满足条件,整个条件才成立,例如:5大于所有返回的id select * from #A where 5>All(select id from #A) go --Any:只 ...

  7. VMware克隆CentOS网络配置

    配置网络 如果是克隆CentOS的: vi /etc/udev/rules.d/70-persistent-net.rules 注释掉网络eth0,把最后一个改为eth0,记录下mac地址. vi / ...

  8. 条款1：视C++为一个语言联邦

    C++是门多范式语言,至少包括面向过程,面向对象,泛型,函数式,元变成等. 但谨记,不要随意混合使用各种特性,为自己制定使用原则,针对不同项目.业务. 如: 类C风格编程:没有模板,没有异常,没有重载 ...

  9. 删除链表中的重复元素：不留&留一个&删除一个

    不留: ［抄题］: 给定一个排序链表,删除所有重复的元素只留下原链表中没有重复的元素. ［思维问题］: 给出 1->2->3->3->4->4->5->nul ...

  10. jquery之DataTables的使用

      jquery之DataTables的使用  document jquery function lsquo 强大的表格解决方案,有多强大,一起来看下吧: 1.DataTables的默认配置 $(do ...