效果图：

源码：

<%@ 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. 两道二分coming~

    第一道:poj 1905Expanding Rods 题意:两道墙(距离L)之间架一根棒子,棒子受热会变长,弯曲,长度变化满足公式( s=(1+n*C)*L),求的是弯曲的高度h. 首先来看这个图: ...

  2. 多个haproxy 之间跳转

    C:\>ping wechatTest.winfae.com 正在 Ping wechatTest.winfae.com [120.55.118.6] 具有 32 字节的数据: 来自 120.5 ...

  3. html ui设计案例

    1.jquery特效:http://www.5icool.org 2. http://www.open-lib.com/Lib/1992.jsp

  4. 深入理解 JBoss 7/WildFly Standalone 模式启动过程

    概述 JBoss 7/WildFly Standalone 模式启动过程大致例如以下: 启动脚本 standalone.sh 启动 JBoss Modules,JBoss Modules 启动 JBo ...

  5. Emotion英语学习

    英语学习断断续续也快两年了,以前也蜻蜓点水地写过几篇总结,但是因为思考的少,只能得到一些表面的收获.从今年三月初到现在,口语阶段已经有三个月,感触较多,所以写这篇博客对这段时间英语学习的一个整体总结. ...

  6. 文档数据库RavenDB-介绍与初体验

    文档数据库RavenDB-介绍与初体验 阅读目录 1.RavenDB概述与特性 2.RavenDB安装 3.C#开发初体验 4.RavenDB资源 不知不觉,“.NET平台开源项目速览“系列文章已经1 ...

  7. 关于Thread类中三个interrupt方法的研究与学习（转）

    先看三个方法原型: public void interrupt(): public boolean isInterrupted(): public static boolean interrupted ...

  8. SharePoint 内容部署-PowerShell

    1. 创建一个新的内容部署路径 New-SPContentDeploymentPath –Name "Marketing Internet Content" –SourceSPWe ...

  9. Pods was rejected as an implicit dependency for &#39;libPods.a&#39; because its architectures &#39;x86_64&#39; didn

    引入cocoaPods后.第一次编译,或者运行update后 可能报这个错误: Pods was rejected as an implicit dependency for 'libPods.a' ...

  10. UVAlive 2519 Radar Installation (区间选点问题)

    Assume the coasting is an infinite straight line. Land is in one side of coasting, sea in the other. ...