<!-- 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. servlet类第二篇

    1servlet的生命周期是什么? 服务器启动时(web.xml中配置load-on-startup=1,默认为0)或者第一次请求该servlet时,就会初始化一个Servlet对象,也就是会执行初始 ...

  2. 神经网络中embedding层作用——本质就是word2vec，数据降维，同时可以很方便计算同义词（各个word之间的距离），底层实现是2-gram（词频）+神经网络

    Embedding tflearn.layers.embedding_ops.embedding (incoming, input_dim, output_dim, validate_indices= ...

  3. Hibernate 序列生成主键

    @Entity @Table(name="TABLE_NAME") public class TableName implements Serializable { @Id @Ge ...

  4. 百度BAE部署微信开发环境

    这里会弹出一个SVN的账户和密码,这个账户和密码就是你百度的账户和密码 将项目导出WAR包到SVN的客户端目录里面 然后右键SVN Commit提交代码 部署列表有新版本 快捷发布 tocken认证失 ...

  5. Python3 range() 函数用法

    Python3 range() 函数用法  Python3 内置函数 Python3 range() 函数返回的是一个可迭代对象(类型是对象),而不是列表类型, 所以打印的时候不会打印列表. Pyth ...

  6. Java finalize以及Garbage Collection

    Java的垃圾回收机制: Java的垃圾回收并不等于C++中的析构.Java中,只有在程序濒临存储空间用完的那一刻,对象占用的空间才会释放.所以,在JAVA程序中,我们通常只考虑创建对象,而从不关心对 ...

  7. python之socket运用2

    今天实现在客户端和服务端之间进行持续的通信 客户端代码 import socket ip_port = ("127.0.0.1",3000) sk = socket.socket( ...

  8. hibernate编写流程

    1.加载hibernatexml配置文件 2.创建sessionFactory 3.根据sessionFactory创建session 4.开启事务 5.持久化操作 6.提交事务 7.释放资源 其中第 ...

  9. 相机拍摄时最重要的三个参数——光圈、快门、ISO

    注:这篇文章我四年前发布在其他地方,现在移过来. 如果你对相机只有很少了解,那么看这篇文章再好不过啦,我结合很多资料,力图用最通俗易懂的方式进行讲解. 相机拍摄时最重要的3个参数就是——光圈.快门.I ...

  10. jq给动态生成的标签绑定事件的几种方法

    经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2" ...