效果图：

源码：

<%@ 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. Android编程心得-Handler与子线程的交互初步

    在编写项目的时候,本人发现一个关于线程与Handler很容易犯的错误. 我有两个Activity,一个Activity在后台创建了一个线程并且启动,这个线程对象对应的实体实在另外一个Activity的 ...

  2. 经典的C++库【转帖】

    源地址:http://www.deuxmille.org/archives/1472 基础类1. Dinkumware C++ Library 参考站点:http://www.dinkumware.c ...

  3. My Emacs For Common Lisp

    My Emacs For Common Lisp My Emacs For Common Lisp

  4. JDK动态代理简单小程序

    Jdk动态代理 1.动态代理使用的情况:需要在多个方法上加上相同的逻辑的时候,需要用到动态代理. 原因:在多个方法上写相同的逻辑,第一费事,第二在不用的时候维护麻烦 使用动态代理需要用到两个类:分别为 ...

  5. JMS学习（三）ActiveMQ Message Persistence（转）

    1,JMS规范支持两种类型的消息传递:persistent and non-persistent.ActiveMQ在支持这两种类型的传递方式时,还支持消息的恢复.中间状态的消息(message are ...

  6. Android自己定义组件系列【2】——Scroller类

    在上一篇中介绍了View类的scrollTo和scrollBy两个方法,对这两个方法不太了解的朋友能够先看<自己定义View及ViewGroup> scrollTo和scrollBy尽管实 ...

  7. Linux下搭建tomcat集群全记录(转)

    本文将讲述如何在Linux下搭建tomcat集群,以及搭建过程中可能的遇到的问题和解决方法.为简单起见,本文演示搭建的集群只有两个tomact节点外加一个apache组成,三者将安装在同一机器上:ap ...

  8. BASH Shell 简易进度条小函数

    不多说,直接上脚本. # processbar <current> <total> processbar() { local current=$1; local total=$ ...

  9. 全面剖析Redis Cluster原理和应用 （转）

    1.Redis Cluster总览 1.1 设计原则和初衷 在官方文档Cluster Spec中,作者详细介绍了Redis集群为什么要设计成现在的样子.最核心的目标有三个: 性能:这是Redis赖以生 ...

  10. android各种资源的详细解释

    1.字符数组      使用字符串数组资源<string-array>标签定义,在<string-array>包括一些标签<item>数组元素标记.   例如 &l ...