<!-- 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. Gson转换时,Double转式化

    package com.mall.core; import java.lang.reflect.Type; import java.text.DecimalFormat; import com.goo ...

  2. Interrupt handler

    1.处理器上的中断硬件关系图 2. 中断处理例程 3. 顶半部与底半部

  3. linux 安装SAMtools，bcftools，htslib，sratoolkit，bedtools,GATK，TrimGalore，qualimap，vcftools，bwa

    --------------------安装Samtools---------------------------------------------------------------------- ...

  4. vs code 插件推荐

    通用插件 HTML Snippets 超级实用且初级的 H5代码片段以及提示 HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式新版已经支持scss文件检 ...

  5. SVN 客户端的安装与配置

    127.0.0.1这个IP地址代表连接本机,其实https://127.0.0.1:443/svn/Test/和https://ZhongZhenhua-PC/svn/Test/是一样的,因为我这里S ...

  6. phpStudy7——MySql数据库的增删查改

    1. 添加数据: //添加数据 $strsql = "insert into user_info(userId,userName,phoneNumber,userScore,dataTime ...

  7. OC 线程操作 - GCD使用 - 栅栏函数

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //同步函数无需栅栏函数 //栅栏 ...

  8. Silverlight程序设置断点无法进入调试的解决方案

    此处 勾上即可.如果下次断点又进不去了,check一下这边的 情况,可以 勾两次 在保存!实在不行,重启,更新VS.

  9. win7系统administrator用户提示没有管理员权限,造装驱动安装错误,软件无法使用

    警告1909.无法创建快捷方式 最近使用windows 7 32位安装软件,好多都失败.出现以上类似错误. 解决方法:在系统盘(C:)右键属性“安全”选项卡--“编辑”,添加“Everyone”设置为 ...

  10. MVC FormCollection 无法获取值的问题

     把action定义为[HttpPost],并且ajax.beginform中ajaxoption中定义为Post,在提交表单时就可以获取FormCollection的值了.httpGet或者后台不定 ...