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 ...
随机推荐
- Spring Boot的学习之路(01):缘起
有人说,Spring Boot的出现,让Java迎来了又一春,它是Java应用开发的颠覆者,彻底改变了Java应用开发的模式. 2017年,SpringBoot闯入我的生活, 也让我迎来了又一春 我开 ...
- springboot中加分布式redis锁
分布式redis锁,spring-boot-starter-data-redis,RedisTemplate 公司聊天的聊天系统,近期出现多个客服并发接待同一个客户的记录,经排查,是由于代码加的同步锁 ...
- Spark —— 高可用集群搭建
一.集群规划 这里搭建一个3节点的Spark集群,其中三台主机上均部署Worker服务.同时为了保证高可用,除了在hadoop001上部署主Master服务外,还在hadoop002和hadoop00 ...
- Java NIO 学习笔记(六)----异步文件通道 AsynchronousFileChannel
目录: Java NIO 学习笔记(一)----概述,Channel/Buffer Java NIO 学习笔记(二)----聚集和分散,通道到通道 Java NIO 学习笔记(三)----Select ...
- [apue] dup2的正确打开方式
管道与重定向常常需要使用dup与dup2复制句柄,其中dup2又较为常用,但是使用dup2有几个小坑需要注意. int dup2(int oldfd, int newfd); man手册页上是这样讲的 ...
- Javascript中escape(), encodeURI()和encodeURIComponent()之精析与比较
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法,而他们之间的异同却困扰了很多的Javascript初学者, ...
- php设计模式-责任链模式
责任链模式更像是一种简化多种场景下调用处理的一种设计模式,特别适合if-else分支判断很多的场景.比如是根据不同会员等级给予不同的优惠力度. 它的定义:对象的调用是由下家的应用连接起来的处理链.一直 ...
- TreeView虚拟化跳转
使用ItemContainerGenerator.ContainerFromItem方法可以获取对应数据的UIElement . 但是如果使用了虚拟化技术,超出可见区域的UIElement就获取不到了 ...
- Linux虚拟机怎么添加磁盘?
一.VMware workstation菜单栏
- scrapy实战6爬取IT桔子国内所有融资公司:
爬取融资公司,融资公司简介,融资时间,轮次,融资额,投资方,股权占比以及融资公司完整融资历史 如图 源码地址:https://github.com/huwei86/spiderITjuzi