效果图：

源码：

<%@ 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. 14.6.2 Moving or Copying InnoDB Tables to Another Machine 移动或者copy InnoDB 表到另外的机器

    14.6.2 Moving or Copying InnoDB Tables to Another Machine 移动或者copy InnoDB 表到另外的机器 这个章节描述技术关于移动或者copy ...

  2. 6.0RMB MP3所看到的……

    产品篇:          偶然看到这个商品信息,作为电子开发人员,首先想到的便是采用了哪家芯片方案,怎么做到这么低的价格!     于是立刻买了一台回来,拆机如下:          成本BOM: ...

  3. HealthKit开发教程Swift版：起步

    原文:HealthKit Tutorial with Swift: Getting Started 作者:Ernesto García 译者:Mr_cyz ) HealthKit是iOS 8中的新的A ...

  4. roll pitch yaw 的分别

    原文地址:http://blog.sina.com.cn/s/blog_452706120100scwu.html yaw,pitch,roll这三个旋转的确切意思.如果有一个人站在(0,0,0)点, ...

  5. Jquery事件的连接

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Django学习之manage.py使用

    1.django-admin.py startproject mysite 开始一个项目,会初始化一些项目的结构文件 2.python manage.py runserver ip:port 如: p ...

  7. 【编程之美】java二进制实现重建

    package com.cn.binarytree.utils; /** * @author 刘利娟 liulijuan132@gmail.com * @version 创建时间:2014年7月20日 ...

  8. MFC之窗体改动工具栏编程状态栏编程程序启动画面

    1窗体外观的改动 (1)改动在CMainFrame::preCreateWindow(CREATESTRUCT& cs) 改动标题:cs.style&=FWS_ADDTOTITLE; ...

  9. 7.数据本地化CCString,CCArray,CCDictionary,tinyxml2，写入UserDefault.xml文件,操作xml，解析xml

     数据本地化 A CCUserDefault 系统会在默认路径cocos2d-x-2.2.3\projects\Hello\proj.win32\Debug.win32下生成一个名为UserDef ...

  10. hdu2389（HK算法）

    传送门:Rain on your Parade 题意:t个单位时间后开始下雨,给你N个访客的位置(一维坐标平面内)和他的移动速度,再给M个雨伞的位置,问在下雨前最多有多少人能够拿到雨伞(两个人不共用一 ...