<!-- 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. Hadoop 初始化系统

    hadoop namenode -format 或者 hdfs namenode -format 2.执行hadoop sbin 目录下的 start-dfs.sh start-yarn.sh3.查看 ...

  2. logging的使用

    [logging的使用] import logging # 创建一个logger logger = logging.getLogger('mylogger') logger.setLevel(logg ...

  3. MAVEN 引入外部JAR 包

    MAVEN引入AXIS依赖的JAR包 在POM.XML中加入即可 <!-- axis 1.4 jar start --> <dependency> <groupId> ...

  4. struts2标签类别

    要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@taglib prefix="s" uri="/struts ...

  5. sign和token设计

    签名设计 对于敏感的api接口,需使用https协议 https是在http超文本传输协议加入SSL层,它在网络间通信是加密的,所以需要加密证书. https协议需要ca证书,一般需要交费. 签名的设 ...

  6. dede数据库内容替换，去掉文章内容中的img标签

    1.织梦已经给我们准备好了数据库内容替换工具,在采集->批量维护->数据库内容替换 2.织梦的文章内容一般在放在dede_addonarticle表body字段中. (1).选择好数据表和 ...

  7. discuz的diy功能介绍

    可以通过页面操作的方式,完成页面布局设计,数据聚合,样式等常见的页面处理功能.   以管理员登陆discuz的前台时,会出现一个diy按钮. 流程,先设计框架,再完成数据的聚合.     定义模板时, ...

  8. c语言重载(overriding in C)或函数不定参数个数

    google一下 c overiding发现有这样一段英文解释: Because C doesn't require that you pass all parameters to the funct ...

  9. c++ 对象复制引用时何时调用构造函数、析构函数

    class TEST{ private : public : TEST() {std::cout << "constructor" << std::endl ...

  10. crontab定时任务操作

    一.查看定时任务 crontab -l 二.添加定时任务 crontab -e (一)执行外部链接 //每隔10分钟执行1次 */ * * * * /usr/bin/curl "http:/ ...