D3js-堆栈图
效果图:
源码:
<%@ 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-堆栈图的更多相关文章
- 【 D3.js 高级系列 — 3.0 】 堆栈图
堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...
- 针对JCC指令练习的堆栈图
堆栈图,主要目的就是练习一下JCC指令的熟练度,供参考 版权声明:本文为博主原创文章,转载请附上原文出处链接和本声明.2019-09-10,23:41:41.作者By-----溺心与沉浮----博客园 ...
- 【reverse】逆向7 堆栈图
[reverse]逆向7 堆栈图 前言 本章就是开始画堆栈图来打基础拉,堆栈熟悉了之后就可以开始C语言的逆向了. 这一章使用的exe文件,我已经上传到了我的个人网盘中,点击下载 1.准备工作 先看这张 ...
- d3js 折线图+柱图
<!DOCTYPE html> <html> <body> <div id="vis"><svg></svg> ...
- D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
- FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参
*起因* 本来想用Chart.js来搞图表的, 但是来了个新需求,想搞的华丽点,毕竟对Chart.js来说,实现有点难度, *做出的改变* 最终选择了FusionCharts, *难点* 网上关于Fu ...
- 在 Visual Studio 中调试时映射调用堆栈上的方法
本文转自:https://msdn.microsoft.com/zh-cn/library/dn194476.aspx 1.创建代码图,以便在调试时对调用堆栈进行可视化跟踪. 你可以在图中进行标注以跟 ...
- 20145230GDB调试汇编堆栈过程分析
20145230GDB调试汇编堆栈过程分析 分析过程 出现的问题:一开始无法编译,是因为我们的Linux中没有安装一个库. 进入之前先设置断点,之后disassemble可以获取汇编代码,用i r指令 ...
- C/C++堆栈指引(转)
C/C++堆栈指引 Binhua Liu 前言 我们经常会讨论这样的问题:什么时候数据存储在堆栈(Stack)中,什么时候数据存储在堆(Heap)中.我们知道,局部变量是存储在堆栈中的:debug时, ...
随机推荐
- Android编程心得-Handler与子线程的交互初步
在编写项目的时候,本人发现一个关于线程与Handler很容易犯的错误. 我有两个Activity,一个Activity在后台创建了一个线程并且启动,这个线程对象对应的实体实在另外一个Activity的 ...
- 经典的C++库【转帖】
源地址:http://www.deuxmille.org/archives/1472 基础类1. Dinkumware C++ Library 参考站点:http://www.dinkumware.c ...
- My Emacs For Common Lisp
My Emacs For Common Lisp My Emacs For Common Lisp
- JDK动态代理简单小程序
Jdk动态代理 1.动态代理使用的情况:需要在多个方法上加上相同的逻辑的时候,需要用到动态代理. 原因:在多个方法上写相同的逻辑,第一费事,第二在不用的时候维护麻烦 使用动态代理需要用到两个类:分别为 ...
- JMS学习(三)ActiveMQ Message Persistence(转)
1,JMS规范支持两种类型的消息传递:persistent and non-persistent.ActiveMQ在支持这两种类型的传递方式时,还支持消息的恢复.中间状态的消息(message are ...
- Android自己定义组件系列【2】——Scroller类
在上一篇中介绍了View类的scrollTo和scrollBy两个方法,对这两个方法不太了解的朋友能够先看<自己定义View及ViewGroup> scrollTo和scrollBy尽管实 ...
- Linux下搭建tomcat集群全记录(转)
本文将讲述如何在Linux下搭建tomcat集群,以及搭建过程中可能的遇到的问题和解决方法.为简单起见,本文演示搭建的集群只有两个tomact节点外加一个apache组成,三者将安装在同一机器上:ap ...
- BASH Shell 简易进度条小函数
不多说,直接上脚本. # processbar <current> <total> processbar() { local current=$1; local total=$ ...
- 全面剖析Redis Cluster原理和应用 (转)
1.Redis Cluster总览 1.1 设计原则和初衷 在官方文档Cluster Spec中,作者详细介绍了Redis集群为什么要设计成现在的样子.最核心的目标有三个: 性能:这是Redis赖以生 ...
- android各种资源的详细解释
1.字符数组 使用字符串数组资源<string-array>标签定义,在<string-array>包括一些标签<item>数组元素标记. 例如 &l ...