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 ...
随机推荐
- SYN4104型 数字网同步时钟
SYN4104型 数字网同步时钟 产品概述 SYN4104型数字网同步时钟是由西安同步电子科技有限公司精心设计.自行研发生产的一款高精度锁相时钟频率源,接收GPS信号,使恒温晶振输出频率同步于GPS卫 ...
- 04-MySQL中的数据类型
1 整体说明MYsql的数据类型#1. 数字: 整型:tinyint int bigint 小数: float :在位数比较短的情况下不精准 double ...
- 预习初三物理电学部分的心得体会&知识梳理(持续更新)
DAY 1 一.摩擦起电 用摩擦的方式使两个不同的物体带电的现象. 二.带电体 如果一个物体能够吸引轻小物体,我们就说这个物体带电或者说带了电荷. (注:吸引轻小物体是作用效果,带电体对任何物体都有吸 ...
- 什么是 VxLAN?
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. VLAN 和 ...
- 最牛MongoDB灾难恢复(WiredTiger.wt文件损坏,Mongo无法启动)
WiredTiger.wt文件是mongoDB的元数据文件,存储了其他数据库表的元数据信息.笔者最近遇到了WiredTiger.wt文件损坏的情况,MongoDB无法启动,数据库中的重要数据危在旦夕. ...
- 并发编程-concurrent指南-阻塞队列-延迟队列DelayQueue
DelayQueue是一个无界的BlockingQueue,用于放置实现了Delayed接口的对象,其中的对象只能在其到期时才能从队列中取走.这种队列是有序的,即队头对象的延迟到期时间最长.注意:不能 ...
- POJ 2778:DNA Sequence(AC自动机构造矩阵)
http://poj.org/problem?id=2778 题意:有m个病毒DNA,问构造一个长度为n的不带病毒DNA的字符串可以有多少种. 思路:看到这题有点懵,想了挺久题解的思路. 使用AC自动 ...
- Codeforces 730J:Bottles(背包dp)
http://codeforces.com/problemset/problem/730/J 题意:有n个瓶子,每个瓶子有一个当前里面的水量,还有一个瓶子容量,问要把所有的当前水量放到尽量少的瓶子里至 ...
- RabbitMQ windows 安装后 此时不应有 \RabbitMQ。
在安装过程中,如果细心实际上在安装的细节显示starting Service后就已经提示这个问题,实际上就是没有注册到RabbitMQ这个服务. 在研究了很久之后才发现原来是安装路径的问题,原先是安装 ...
- Linux 操作系统及其组成,shell命令
Linux 操作系统及其组成 操作系统的作用 操作系统(OS)是管理计算机硬件与软件资源的计算机程序,同时也是计算机系统的内核与基石.操作系统需要处理如管理与配置内存.决定系统资源供需的优先次序.控制 ...