<!-- 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. Games.RecordMobileGamePlayVideo

    1. kamcord https://github.com/kamcord/ 2. Sound Stage & iSimulate http://blog.tacograveyard.com/ ...

  2. UI设计课程教程分享：Banner的设计和技巧

    Banner是一个网站的中心主题,可以从banner看出网站的内容.所以一个好的banner对网站的影响很大. 提高banner的制作从几点深入了解:文字排版.选择适合的图片及背景.颜色的用法. 一. ...

  3. b2c项目访问

    http://xmpw.testbase.smi170.com:8091/member/movie_coupon_new.php

  4. laravel目录结构

  5. jedis常用API

    一.Redis Client介绍 1.1.简介 Jedis Client是Redis官网推荐的一个面向java客户端,库文件实现了对各类API进行封装调用. Jedis源码工程地址:https://g ...

  6. STL基础2：vector中使用结构体

    #include <iostream> #include <vector> #include <numeric> #include <algorithm> ...

  7. spring 学习 一 spring 介绍

    Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架. Spring ...

  8. response设置编码格式

    response设置编码的三种方式 在java后台的Action代码或者Servlet代码中用response的方法来设置输出内容的编码方式,有以下三个方法: 1.response.setCharac ...

  9. 2019.01.02 bzoj2467: [中山市选2010]生成树（矩阵树定理）

    传送门 矩阵树定理模板题. 题意简述:自己看题面吧太简单懒得写了 直接构建出这4n4n4n个点然后按照题面连边之后跑矩阵树即可. 代码: #include<bits/stdc++.h> # ...

  10. vue-cli引入mui的步骤

    不用npm安装了 1.mui官方GitHub下载mui所需文件 https://github.com/dcloudio/mui 把下载来的dist文件夹整个复制到static文件夹中 2.在index ...