<!-- 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. poj 1182 (关系并查集) 食物链

    题目传送门:http://poj.org/problem?id=1182 这是一道关系型并查集的题,对于每个动物来说,只有三种情况:同类,吃与被吃: 所以可以用0,1,2三个数字代表三种情况,在使用并 ...

  2. eclipse中增加多个Tomcat

    一.在eclipse中新增Tomcat,并增加在其上部署的工程 1.打开eclipse,并选择菜单中的 "Window" ---> "Show View" ...

  3. iOS.PrototypeTools

    1. iPhone/iPad 原型工具 http://giveabrief.com/ 2. proto.io https://proto.io/ 3. Origami http://facebook. ...

  4. 探索未知种族之osg类生物---呼吸分解之事件循环一

    事件循环和更新循环 终于到了我们嘴里经常念叨的事件循环.更新循环以及渲染循环了.首先我们来区分一下事件循环和渲染循环,他们两个首先是两个不同顺序执行的过程,我们有时候会用到任意node的updateC ...

  5. UVA 11324.The Largest Clique tarjan缩点+拓扑dp

    题目链接:https://vjudge.net/problem/UVA-11324 题意:求一个有向图中结点数最大的结点集,使得该结点集中任意两个结点u和v满足:要目u可以到达v,要么v可以到达u(相 ...

  6. TCHAR函数查询

    https://blog.csdn.net/is2120/article/details/27542927

  7. java 银联接口开发

    http://blog.sina.com.cn/s/blog_6c868c470100ys59.html 在线接口文档:http://wenku.baidu.com/link?url=EUgAuOKz ...

  8. @Transactional注解使用心得

    配置基于注解的声明式事务: ...配置tx,aop的命名空间 xmlns:tx="http://www.springframework.org/schema/tx" xmlns:a ...

  9. Linux mount命令

    mount 1.作用 mount命令的作用是加载文件系统,它的用权限是超级用户或/etc/fstab中允许的使用者. 2.格式 mount -a [-fv] [-t vfstype] [-n] [-r ...

  10. 9月list

    开学了,我已经是大三的老学姐了,难受! 哇,时间过得好快啊,感觉自己快毕业了,肿么办!!! 9月了,快一年了,其实很多东西都变了,比如你. 9月4日的list: