<!-- 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. 团队作业之Rookie also want to fly

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 在时代的浪潮下,单人编程,结对编程已经无法满 ...

  2. 如何使用queue_delayed_work函数

    本文转自如何使用queue_delayed_work函数 1. delayed_workqueue主要用在需要延迟处理任务的驱动中,这些驱动的特性主要是不能使用中断. delayed_workqueu ...

  3. Linux使用touch批量修改文件/文件夹时间戳

      Linux下touch是一个非常有用的命令. touch语法结构如下: touch [-acfm][-d <日期时间>][-r <参考文件或目录>][-t <日期时间 ...

  4. 用vs2015 编译 web app ionic

    1.要下载https://git-for-windows.github.io/ 2.下载ionic模版

  5. linux学习第二天 (Linux就该这么学)

    2018年11月10日,今天是学习的第二天 今天学习了安装vmware workstation12的安装及怎么安装 redhat7系统,在新建虚拟机时注意要选择“稍后安装操作系统”要vmwark wo ...

  6. About the Cron Expression

    About the Cron Expression Cron is use in Linux for the time schedule Format Seconds Minutes Hours Da ...

  7. Python之路番外(第三篇)：Pycharm的使用秘籍

    版本:Pycharm2017.3.4Professional Edition 一.Pycharm的基本使用1.在Pycharm下为你的python项目配置python解释器 file --settin ...

  8. mongoDB（Linux）

    启动  service mongod start 安装好后,输入mongo进入控制台 创建数据库 use baseName db.createCollection("game_record& ...

  9. nginx设置代理配置

    server {                 listen  8086;                 resolver 8.8.8.8;                 location /{ ...

  10. android windows的一些item属性

    <item name="android:windowFrame">@null</item> :Dialog的windowFrame框为无 <item ...