d3.js实现柱形图,饼图以及折现图
饼图
var width = 500;
var height = 500;
//处理数据
var dataset = [ 30 , 10 , 43 , 55 , 13 ];
var pie = d3.layout.pie();
var piedata = pie(dataset); var svg = d3.select(".column")
.append("svg")
.attr("width", width)
.attr("height", height); //外半径
var outerRadius = 150;
//内半径,为0则中间没有空白
var innerRadius = 30; var arc = d3.svg.arc() //弧生成器
.innerRadius(innerRadius) //设置内半径
.outerRadius(outerRadius); //设置外半径 //颜色比例尺
var color = d3.scale.category10();
//var color = [d3.rgb(0,0,255),d3.rgb(0,255,0),d3.rgb(0,0,255),d3.rgb(0,255,0),d3.rgb(0,0,255)];
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")"); arcs.append("path")
.attr("fill",function(d,i){
return color(i);
})
.attr("d",function(d){
return arc(d);
}); arcs.append("text")
.attr("transform",function(d){
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor","middle")
.text(function(d){
return d.data;
});
折线图
var width=500;
var height=500; var dataset=[
{
country:"china",
gdp:[[2000,11920],[2001,13170],[2002,14550],
[2003,16500],[2004,19440],[2005,22870],
[2006,27930],[2007,35040],[2008,45470],
[2009,51050],[2010,59490],[2011,73140],
[2012,83860],[2013,103550],]
},
{
country:"japan",
gdp:[[2000,47310],[2001,41590],[2002,39800],
[2003,43020],[2004,46550],[2005,45710],
[2006,43560],[2007,43560],[2008,48490],
[2009,50350],[2010,54950],[2011,59050],
[2012,59370],[2013,48980],]
},
]; var padding={top:70, right:70, bottom: 70, left:70};
var gdpmax=0;
for(var i=0;i<dataset.length;i++){
//d3.max求解gdp最大值
var currGdp=d3.max(dataset[i].gdp,function(d){
return d[1];
});
if(currGdp>gdpmax)
gdpmax=currGdp;
}
//创建x y轴
var xScale=d3.scale.linear()
.domain([2000,2013])
.range([0,width-padding.left-padding.right]); var yScale=d3.scale.linear()
.domain([0,gdpmax*1.1])
.range([height-padding.bottom-padding.top,0]); //创建一个直线生成器为了访问数组数据
var linePath=d3.svg.line()
.x(function(d){
return xScale(d[0]);
})
.y(function(d){
return yScale(d[1]);
})
.interpolate("basis");//插值模式
//定义两个颜色
var colors=[d3.rgb(0,0,255),d3.rgb(0,255,0)]; var svg=d3.select(".column")
.append("svg")
.attr("width",width)
.attr("height",height); svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("transform","translate("+padding.left+","+padding.top+")")
.attr("d",function(d){
return linePath(d.gdp);
})
.attr("fill","none")
.attr("stroke-width",3)
.attr("stroke",function(d,i){
console.log(colors[i]);
return colors[i];
}); //调整xy的位置
var xAxis=d3.svg.axis()
.scale(xScale)
.ticks(5)
.tickFormat(d3.format("d"))
.orient("bottom"); var yAxis=d3.svg.axis()
.scale(yScale)
.orient("left"); //添加一个g用于放x轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.left+","+(height-padding.top)+")")
.call(xAxis); svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.left+","+padding.top+")")
.call(yAxis);
柱形图
var width = 400;
var height = 400; var dataset = [10, 20, 30, 50, 45, 60, 18];
var padding = {left: 30, right: 30, top: 20, bottom: 20}; var svg = d3.select(".column2").append("svg").attr("width", width).attr("height", height);//添加画布 //xy轴
var xScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0, width - padding.left - padding.right]);
var yScale = d3.scale.linear().domain([0, d3.max(dataset)]).range([height - padding.top - padding.bottom, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left"); //添加矩形元素
var rects = svg.selectAll(".myRect")
.data(dataset)
.enter()
.append("rect")
.attr("class", "myRect")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {
return xScale(i) + 2;
})
.attr("y", function (d, i) {
return yScale(d);
})
.attr("width", function (d, i) {
return xScale.rangeBand() - 2;
})
.attr("height", function (d, i) {
return height - padding.top - padding.bottom - yScale(d);
})
.attr("fill", "steelblue"); //添加文字元素
var texts = svg.selectAll(".myText")
.data(dataset)
.enter()
.append("text")
.attr("class", "myText")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {
return xScale(i) + 2;
})
.attr("y", function (d, i) {
return yScale(d);
})
.attr("width", function (d, i) {
return (xScale.rangeBand() - 4) / 2;
})
.attr("height", function (d, i) {
return 20;
}).text(function (d) {
return d;
}) //添加坐标轴
svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
d3.js实现柱形图,饼图以及折现图的更多相关文章
- vue+echarts实现可拖动节点的折现图(支持拖动方向和上下限的设置)
本篇文档主要是利用echarts实现可拖动节点的折现图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c= ...
- 【 D3.js 高级系列 — 3.0 】 堆栈图
堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...
- 【 D3.js 高级系列 — 2.0 】 捆图
捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbo ...
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和 ...
- 【 D3.js 进阶系列 — 2.2 】 力学图的參数
力学图的布局中有非常多參数.本文将逐个说明. D3 中的力学图布局是使用韦尔莱积分法计算的.这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中. 定义布局的代码例如以下: ...
- 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图
机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...
- 【 D3.js 入门系列 --- 9.3 】 弦图生产
我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.例如以下图: ...
- echarts折现图配置
js引用和div容器 <div id="container" style="height: 100%"></div> <scrip ...
- d3.js(v5.7)力导向图(关系图谱)
先上图,后面再一一解释: ok,为了方便理解,这里我就没有用之前封装的automatch函数来将数据和节点匹配了,如果你对enter(),exit()函数还不是很理解的话,请移步至我之前写的<n ...
随机推荐
- Linux使用daemontools
功能: 在使用memcached时候,怕因为一些不可预知的因素导致memcached进程死掉,而又不能及时的发现重启,可以通过daemontools来管理memcached的启动,当memcached ...
- Python基础,day3
本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法及特性 如何不重复代码,其实很 ...
- PATB 1019. 数字黑洞 (20)
一个神奇的数字. 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定任一个各位数字不完全相同的4位正整数,如果我 ...
- SHELL 中条件语句的运用 if for 条件测试语句
if条件测试语句可以让脚本根据实际情况自动执行相应的命令.从技术角度来讲,if语句分为单分支结构.双分支结构.多分支结构:其复杂度随着灵活度一起逐级上升. if条件语句的单分支结构由if.then.f ...
- VIM技巧, .vimrc文件
将 .vimrc文件上传到用户家目录下 文件内容如下: autocmd BufNewFile *.py,*.cc,*.sh,*.java exec ":call SetTitle()&quo ...
- [apue] 使用 poll 检测管道断开
一般使用 poll 检测 socket 或标准输入时,只要指定 POLLIN 标志位,就可以检测是否有数据到达,或者连接断开: ]; fds[].fd = STDIN_FILENO; fds[].ev ...
- python学习 -女神或者男神把微信消息撤回后好慌,有了这个妈妈再也不担心你看不到女神或者男神撤回的消息了(超详解)
简介 有时候在忙工作,女朋友发了一个消息,就撤回了,但是人天生的都有一颗好奇心,而且在当今这个时代找个女朋友不容易,一个程序猿找一个女朋友更是不容易的.人家好不容易跟你,你还不得把人家当老佛爷侍候着, ...
- sql 中 并集union和union all的使用区别
union 操作符用于合并两个或多个 SELECT 语句的结果集,并且去除重复数据,按照数据库字段的顺序进行排序. 例 SELECT NAME FROM TABLE1UNIONSELECT EMP_ ...
- Golang之mirco框架部分浅析
在实习中使用 micro 框架,但是挺多不懂的,看了部分源码搞懂了一些,还是有一些比较复杂没搞懂. 第一部分:初始化 service 并修改端口 main.go // waitgroup is a h ...
- POJ 2679:Adventurous Driving(SPFA+DFS)
http://poj.org/problem?id=2679 Adventurous Driving Time Limit: 1000MS Memory Limit: 65536K Total S ...