效果图：

源码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>D3 -堆栈图</title>

	<style type="text/css">

	.axis path,

	.axis line{

	fill: none;

	stroke: black;

	 shape-rendering: crispEdges;

}

.axis text {

	font-family: sans-serif;

	font-size: 14px;

	font-weight: bold;

}

	</style>

  </head>

  <body>

  	<script type="text/javascript" src="js/d3/d3.js"></script>

	<script type="text/javascript" src="js/d3/d3.min.js"></script>

   <script type="text/javascript">

   		var width = 750;

   		var height = 500;

   		var padding ={left:80 ,top:50,right:100,bottom:30};

   		var svg = d3.select("body").append("svg")

   								   .attr("width",width)

   								   .attr("height",height);

   		//数据

   		var dataset = [

						{ name: "PC" ,

						  sales: [	{ year:2005, profit: 3000 },

									{ year:2006, profit: 1300 },

									{ year:2007, profit: 3700 },

									{ year:2008, profit: 4900 },

									{ year:2009, profit: 700 },

									{ year:2010, profit: 700 }] },

						{ name: "SmartPhone" ,

						  sales: [	{ year:2005, profit: 2000 },

									{ year:2006, profit: 4000 },

									{ year:2007, profit: 1810 },

									{ year:2008, profit: 6540 },

									{ year:2009, profit: 2820 },

									{ year:2010, profit: 1000 }] },

						{ name: "Software" ,

						  sales: [	{ year:2005, profit: 1100 },

									{ year:2006, profit: 1700 },

									{ year:2007, profit: 1680 },

									{ year:2008, profit: 4000 },

									{ year:2009, profit: 4900 },

									{ year:2010, profit: 700 }] }

					 ];

   			//layout转换数据,转换成适合堆栈图的数据

   			var stack = d3.layout.stack()

   								.values(function(d){//获取或设置每一个系列值的訪问器函数

   									return d.sales;

   								})

   								.x(function(d){//获取或设置x轴訪问器函数

   									return d.year;

   								})

   								.y(function(d)//获取或设置y轴訪问器函数

   								{

   									return d.profit;

   								});

   			var data =stack(dataset);

   			console.log(data);//输出数据，能够查看到y0和y

   		//x轴比例尺

   			var xRange = width-padding.left-padding.right;

   			//序列比例尺 (设置x轴上每一个节点(年份)所显示的位置)

   			var xScale =d3.scale.ordinal()

   						  .domain(data[0].sales.map(function(d){ //设置比例尺的定义域  (在x轴要显示的数据)

   						  	return d.year;

   						  }))

   						  .rangeBands([0,xRange],0.3);//为离散的块划分值域,(设置图表适合页面的宽度，显示位置)	

   		//Y轴比例尺

			//获得定义域最大值  (data[data.length-1]是最上面那个矩形，位于最高层，所以他的sales中的y0+y是最大的)

			var bigProfit = d3.max(data[data.length-1].sales,function(d)

			{

				return d.y+d.y0; //y0即该层起始坐标，y是高度

			});

			//获得值域最大值

			var yRange =height-padding.top-padding.bottom;

   			//线性比例尺

   			var yScale = d3.scale.linear()

   							.domain([0,bigProfit])   //定义域

   							.range([0,yRange]); //值域

   		//颜色比例尺

   		var color = d3.scale.category20();

 		//加入分组g标签 并设置颜色

 		var groupRect = svg.selectAll("g")

 							.data(data)

 							.enter()

 							.append("g")

 							.attr("fill",function(d,i)

 							{

 								return color(i);

 							});

 		//加入矩形

 		var rects = groupRect.selectAll("rect")

 							.data(function(d)

 							{

 								return d.sales;

 							})

 							.enter()

 							.append("rect")

 							.attr("x",function(d,i){

 								return xScale(d.year); //x轴上坐标的位置

 							})

 							.attr("y",function(d,i){

 								return yRange-(yScale(d.y0+d.y));//Y轴上坐标的高度

 							})

 							.attr("width",function(d,i)

 							{

 								return xScale.rangeBand(); //rangeBand()取得离散块的宽度，即x轴上各个矩形的宽度

 							})

 							.attr("height",function(d,i)

 							{

 								return yScale(d.y); //y为矩形的高度

 							})

 							 //堆栈图偏移位置。即详细页面左边和顶部的位置

 							.attr("transform","translate("+padding.left+","+padding.top+")"); 

 		//加入 x轴

 		var xAxis = d3.svg.axis()

 						.scale(xScale)//取得比例尺

 						.orient("bottom");//设置显示的方位

 		svg.append("g")

 			.attr("class","axis")

 			.attr("transform",function(d,i) //坐标位置

 			{

 				return "translate("+padding.left+","+(height-padding.bottom)+")";

 			})

 			.call(xAxis)

 			//x轴坐标说明

 			.append("text")

 			.attr("x",function(d)

 			{

 				return width-padding.left-padding.right;

 			})

 			.text("year");

 		//加入y轴

 		yScale.range([yRange,0]); //y轴上数据是从上到下递减

 		var yAxis = d3.svg.axis()

 						.scale(yScale)

 						.orient("left");

 		svg.append("g")

 			.attr("class","axis")

 			.attr("transform",function(d,i) //坐标位置

 			{

 				return "translate("+padding.left+","+(height-padding.bottom-yRange)+")";

 			})

 			.call(yAxis)

 			//y轴坐标说明

 			.append("text")

 			.text("profit")

 			.attr("x",function(d)

 			{

 				return -20;

 			});

 		//分组标签

 		var labHeight=50;

 		var labRadius=10;

 		//圆形标识

 		var labelCircle = groupRect.append("circle")

 									.attr("cx",function(d)

 									{

 										return width-padding.right*0.98;

 									})

 									.attr("cy",function(d,i)

 									{

 										return padding.top*2+labHeight*i*0.5;

 									})

 									.attr("r",labRadius);

 		//文本文字

 		var labelText = groupRect.append("text")

 								.attr("x",function(d)

 								{

 									return width-padding.right*0.8;

 								})

								.attr("y",function(d,i)

								{

									return padding.top*2+labHeight*i*0.5;

								})

								//dy使 文字显示和圆形的圆心在同一行

								 .attr("dy",function(d)

								{

									return labRadius/2;

								})

								.text(function(d)

								{

									return d.name;

								});

   </script>

  </body>

</html>

当中y和y0的介绍：y表示矩形（柱状体）的高度，y0表示这个柱状体的起始高度（即这个矩形从哪里開始绘制）

解释一下上图：（以绘制的第一排柱状体为例）

绘制出来是以下这个效果

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

第一个矩形（最以下那个蓝色矩形）起始位置y0是0。它的高度y(也就是数据中profit的值)是3000；中间那个矩形它在第一个矩形上面所以它的起始高度y0是3000，而它的高度y是2000；最上面那层矩形它的起始高度是以下两个矩形的高度和就是5000，它的高度y是1100。这就是y和y0所表示的意思。

来源站点：http://www.ourd3js.com/wordpress/?p=1007

D3js-堆栈图的更多相关文章

  1. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

  2. 针对JCC指令练习的堆栈图

    堆栈图,主要目的就是练习一下JCC指令的熟练度,供参考 版权声明:本文为博主原创文章,转载请附上原文出处链接和本声明.2019-09-10,23:41:41.作者By-----溺心与沉浮----博客园 ...

  3. 【reverse】逆向7 堆栈图

    [reverse]逆向7 堆栈图 前言 本章就是开始画堆栈图来打基础拉,堆栈熟悉了之后就可以开始C语言的逆向了. 这一章使用的exe文件,我已经上传到了我的个人网盘中,点击下载 1.准备工作 先看这张 ...

  4. d3js 折线图+柱图

    <!DOCTYPE html> <html> <body> <div id="vis"><svg></svg> ...

  5. D3js初探及数据可视化案例设计实战

    摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...

  6. FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参

    *起因* 本来想用Chart.js来搞图表的, 但是来了个新需求,想搞的华丽点,毕竟对Chart.js来说,实现有点难度, *做出的改变* 最终选择了FusionCharts, *难点* 网上关于Fu ...

  7. 在 Visual Studio 中调试时映射调用堆栈上的方法

    本文转自:https://msdn.microsoft.com/zh-cn/library/dn194476.aspx 1.创建代码图,以便在调试时对调用堆栈进行可视化跟踪. 你可以在图中进行标注以跟 ...

  8. 20145230GDB调试汇编堆栈过程分析

    20145230GDB调试汇编堆栈过程分析 分析过程 出现的问题:一开始无法编译,是因为我们的Linux中没有安装一个库. 进入之前先设置断点,之后disassemble可以获取汇编代码,用i r指令 ...

  9. C/C++堆栈指引（转）

    C/C++堆栈指引 Binhua Liu 前言 我们经常会讨论这样的问题:什么时候数据存储在堆栈(Stack)中,什么时候数据存储在堆(Heap)中.我们知道,局部变量是存储在堆栈中的:debug时, ...

随机推荐

  1. C++中的对象指针

    指向对象的指针 在建立对象的时候,变异系统会给每一个对象分配一定的存储空间,以存放其成员. 对象空间的起始地址就是对象的指针.可以定义一个指针变量,用来存放对象的指针. 一个简单的示例1.1: #in ...

  2. objective-C 中的内存管理解说

    初学objectice-C的朋友都有一个困惑,总觉得对objective-C的内存管理机制琢磨不透,程序经常内存泄漏或莫名其妙的崩溃.我在这里总结了自己对objective-C内存管理机制的研究成果和 ...

  3. 将Ojective-C代码移植转换为Swift代码

    相比于Objective-C,Swift语言更加简练.有时我们需要把原来写的一些Objective-C代码转换成Swift,下面总结了各种常见的情况. 1,构造函数的迁移 Objective-C为: ...

  4. Delphi面向对象设计的经验原则（61条）

    (1)所有数据都应该隐藏在所在的类的内部. (2)类的使用者必须依赖类的共有接口,但类不能依赖它的使用者. (3)尽量减少类的协议中的消息. (4)实现所有类都理解的最基本公有接口[例如,拷贝操作(深 ...

  5. [Django实战] 第4篇 - 用户认证（用户登录）

    今天来实现用户登录模块 首先,我们创建一个表单(forms.py): from django import forms from django.contrib.auth.models import U ...

  6. MIPS平台目标机安装Oprofile时出现error

    在Debian下安装Oprofile 重要:应该使linux内核选项支持 在 .config 文件中设置CONFIG_PROFILING=y和CONFIG_OPROFILE=y. 重新编译,烧写.使用 ...

  7. 使用CocoaPods出现 The `master` repo requires CocoaPods 0.32.1 - 问题解决

    近期在使用CocoaPods为project配置第三方类库时出现了例如以下问题: [!] The `master` repo requires CocoaPods 0.32.1 - 明显是由于Coco ...

  8. Android开发经验之—intent传递大数据

    在Activity或者组件之前传递信息时,一般採用intent绑定bundle的方式传值,但在使用过程中须要注意的是不要用bundle传递大容量数据: 在做项目的过程中,须要将听写界面的听写结果信息传 ...

  9. boost库在工作（33）网络服务端之三

    在这个例子里,表示服务器与一个客户端的沟通渠道,就是一个连接,封装为类CConnect.它是当服务器接收到一个客户端连接请求之后创建的,主要用来就是管理这个连接的生命周期,以及数据的接收和发送.从生命 ...

  10. Java 开源博客——B3log Solo 0.6.1 正式版发布了！

    Java 开源博客 —— B3LOG Solo 0.6.1 正式版发布了!欢迎大家下载. 该版本主要是改善细节体验,并加入了一款 Metro 风格的皮肤. 特性 基于标签的文章分类 Ping Goog ...