<!-- book :interactive data visualization for the web

11.2 stack

一个堆叠图的例子

-->

<!DOCTYPE html>

<meta charset="utf-8">

<style>

</style>

<body>

<script src="../d3.min.js"></script>

<script>

var dataset = [

[

{ x: 0, y: 5 },

{ x: 1, y: 4 },

{ x: 2, y: 2 },

{ x: 3, y: 7 },

{ x: 4, y: 23 }

],

[

{ x: 0, y: 10 },

{ x: 1, y: 12 },

{ x: 2, y: 19 },

{ x: 3, y: 23 },

{ x: 4, y: 17 }

],

[

{ x: 0, y: 22 },

{ x: 1, y: 28 },

{ x: 2, y: 32 },

{ x: 3, y: 35 },

{ x: 4, y: 43 }

]

];

var stack=d3.layout.stack();

stack(dataset); //只有经过这一步，dataset才可以转变堆叠图的数据

var color=d3.scale.category10();

var w=500,h=100;

var xScale=d3.scale.ordinal()

.domain(d3.range(dataset[0].length)) //序数要取[0]

.rangeRoundBands([0,w],0.05)

;

var yScale=d3.scale.linear()

.domain([0,

d3.max(dataset,function(d){

return d3.max(d,function(d){

console.log(d.y0);

console.log(d.y);

return d.y0+d.y;

});

})

])

.range([0,h]) //什么时候为h,0

;

var svg=d3.select('body')

.append('svg')

.attr({

'width':w,

'height':h

})

;

var groups=svg.selectAll('g')

.data(dataset)

.enter()

.append('g')

.style('fill',function(d,i){

return color(i);

})

;

var rects=groups.selectAll('rect')

.data(function(d){return d;})

.enter()

.append('rect')

.attr({

'x':function(d,i){

return xScale(i);

},

'y':function(d){

return yScale(d.y0);

},

// 以x轴底部为基础

// 'y':function(d){

// return h-yScale(d.y+d.y0);

// },

'width':xScale.rangeBand(),

'height':function(d,i){

return yScale(d.y);

},

})

;

</script>

<!-- 以左y轴为基础 -->

<!DOCTYPE html>

<meta charset="utf-8">

<style>

</style>

<body>

<script src="../d3.min.js"></script>

<script>

var dataset = [

[

{ x: 0, y: 5 },

{ x: 1, y: 4 },

{ x: 2, y: 2 },

{ x: 3, y: 7 },

{ x: 4, y: 23 }

],

[

{ x: 0, y: 10 },

{ x: 1, y: 12 },

{ x: 2, y: 19 },

{ x: 3, y: 23 },

{ x: 4, y: 17 }

],

[

{ x: 0, y: 22 },

{ x: 1, y: 28 },

{ x: 2, y: 32 },

{ x: 3, y: 35 },

{ x: 4, y: 43 }

]

];

var stack=d3.layout.stack();

stack(dataset); //只有经过这一步，dataset才可以转变堆叠图的数据

var color=d3.scale.category10();

var w=100,h=500;

var yScale=d3.scale.ordinal()

.domain(d3.range(dataset[0].length)) //序数要取[0]

.rangeRoundBands([0,h],0.05)

;

var xScale=d3.scale.linear()

.domain([0,

d3.max(dataset,function(d){

return d3.max(d,function(d){

console.log(d.y0);

console.log(d.y);

return (d.y0+d.y);

});

})

])

.range([0,w]) //什么时候为h,0

;

var svg=d3.select('body')

.append('svg')

.attr({

'width':w,

'height':h

})

;

var groups=svg.selectAll('g')

.data(dataset)

.enter()

.append('g')

.style('fill',function(d,i){

return color(i);

})

;

var rects=groups.selectAll('rect')

.data(function(d){return d;})

.enter()

.append('rect')

.attr({

'y':function(d,i){

return yScale(i);

},

'x':function(d){

return xScale(d.y0);

},

'height':yScale.rangeBand(),

'width':function(d,i){

return xScale(d.y);

},

})

;

</script>

D3_book 11.2 stack的更多相关文章

  1. tensorflow 基本函数(1.tf.split, 2.tf.concat,3.tf.squeeze, 4.tf.less_equal, 5.tf.where, 6.tf.gather, 7.tf.cast, 8.tf.expand_dims, 9.tf.argmax, 10.tf.reshape， 11.tf.stack， 12tf.less， 13.tf.boolean_mask

    1.  tf.split(3, group, input)  # 拆分函数    3 表示的是在第三个维度上, group表示拆分的次数, input 表示输入的值 import tensorflow ...

  2. 第11天 Stack Queue

    1.Stack package algs4; import java.util.Iterator; import java.util.NoSuchElementException; public cl ...

  3. 数据结构11: 栈(Stack)的概念和应用及C语言实现

    栈,线性表的一种特殊的存储结构.与学习过的线性表的不同之处在于栈只能从表的固定一端对数据进行插入和删除操作,另一端是封死的. 图1 栈结构示意图 由于栈只有一边开口存取数据,称开口的那一端为“栈顶”, ...

  4. 11/9 <Stack> 155 232 225

    155. Min Stack class MinStack { int min = Integer.MAX_VALUE; Stack<Integer> stack = new Stack& ...

  5. D3_book 11.3 force

    <!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> ...

  6. D3_book 11.1 pie

    <!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> ...

  7. Java编程思想(11~17)

    [注:此博客旨在从<Java编程思想>这本书的目录结构上来检验自己的Java基础知识,只为笔记之用] 第十一章 持有对象 11.1 泛型和类型安全的容器>eg: List<St ...

  8. 数据结构：二级指针与Stack的数组实现

    [简介] Stack,栈结构,即传统的LIFO,后进先出,常用的实现方法有数组法和链表法两种.如果看过我上一篇文章<数据结构:二级指针与不含表头的单链表>,一定会看到其中的关键在于,利用v ...

  9. TensorFlow tensor张量拼接concat - split & stack - unstack

    TensorFlow提供两种类型的拼接: tf.concat(values, axis, name='concat'):按照指定的已经存在的轴进行拼接 tf.stack(values, axis=0, ...

随机推荐

  1. iOS.ChangeIniOS7

    1. Multitasking in iOS 7 http://www.objc.io/issue-5/multitasking.html http://www.slideshare.net/mrem ...

  2. JS 实现 jQuery的$(function(){});

    1.浏览器渲染引擎的HTML解析流程 何谓“渲染”,其实就是浏览器把请求到的HTML内容显示出来的过程.渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成.下面是渲染引擎在取得内容之后 ...

  3. HDOJ4261 Estimation

    一道需要用堆初始化的\(DP\) 原题链接 显然对于每一个部分,当\(b[i]\)为\(a\)对于部分的中位数时,差错最小.设\(S(x,y)\)表示\(x\sim y\)这一部分的差错. \(DP\ ...

  4. Java中关键字static的使用

    static 关键字 1).static只能修饰成员变量或成员方法,所有非静态是对象相关的,所有静态是类相关的. 2)被static修饰的成员变量成员方法独立于该类的任何对象,它不依赖类的特定的实例, ...

  5. 请简要介绍Sping MVC、IoC和AOP

    Sping MVC是在Spring框架上发展起来的框架,它提供了构建Web应用程序的全功能MVC模块,使用了Spring可插入的MVC架构,可以自由的选择各个模块所使用的架构,非常灵活.Spring ...

  6. Spring Environment（二）源码分析

    Spring Environment(二)源码分析 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring Envi ...

  7. docker下安装tomcat

    一,查看tomcat镜像 [root@icompany ~]# docker search tomcat INDEX NAME DESCRIPTION STARS OFFICIAL AUTOMATED ...

  8. ros pluginlib 段错误

    最近在重新回看ROS插件时,运行出现了段错误,发现是boost版本问题,我目前版本是1.66,应该调整至1.58版本,如果跟其他软件使用不同的boost版本时,可以把相应版本编译到本地,不instal ...

  9. curl命令整理

    ##curl命令 curl命令是一个功能强大的网络工具,它能够通过http.ftp等方式下载文件,也能够上传文件. #####1. 下载单个文件,默认将输出打印到标准输出中(STDOUT)中``` c ...

  10. html--笔记day03

    html--笔记day03 1.结构标记 1.<header>元素 <header></header> ==> <div id="header ...