<!-- 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. JSP复习

    3.2.2 JSP指令元素: JSP指令 (1) page指令:定义整个页面的全局属性 (2)include指令:用于包含一个文件或代码的文件 (3)taglib指令:用来引用自定义的标签或第三方标签 ...

  2. 基元线程同步构造 AutoResetEvent和ManualResetEvent 线程同步

    在.Net多线程编程中,AutoResetEvent和ManualResetEvent这两个类经常用到, 他们的用法很类似,但也有区别.ManualResetEvent和AutoResetEvent都 ...

  3. console.log等不能打印全部数据/信息

    有时候console.log在chrome调试控制台打印不全,如下: 这个时候,我们可以点击进去:用watch 工具,添加变量,右击copy value 选项:

  4. Dubbo 分布式服务框架

    要想了解Dubbo是什么,我们不防先了解它有什么用. 使用场景:比如我想开发一个网上商城项目,这个网上商城呢,比较复杂,分为pc端web管理后台,微信端销售公众号,那么我们分成四个项目,pc端网站,微 ...

  5. ECMAScript5新特性之获取对象特有的属性

    'use strict'; // 父类 function Fruit(){ } Fruit.prototype.name = '水果'; // 子类 function Apple(desc){ thi ...

  6. OC 线程操作 - GCD快速迭代

    - (void)forDemo{ //全都是在主线程操作的 ; i<; i++) { NSLog(@"--%@", [NSThread currentThread]); } ...

  7. [leetcode]560. Subarray Sum Equals K 和为K的子数组

    Given an array of integers and an integer k, you need to find the total number of continuous subarra ...

  8. hadoop应用场景总结

    原文地址 我个人接触hadoop仅仅不到一年,因为是业余时间学习,故进度较慢,看过好多视频,买过好多书,学过基本知识,搭建过伪分布式集群,有过简单的教程式开发,恰逢毕业季,面试过相关岗位,自认为路还很 ...

  9. js记录

    --获取后缀名,结果 .jpg var extName = "/upload/head_img/20150902102539.jpg";var ta = extName.subst ...

  10. [Selenium]Eclipse hangs at 57% in debug mode with TestNG tests

    案例1: I am very thankful to saish and cbeust for the solution. I went through the similar issue with ...