饼图

  1. var width = 500;
  2. var height = 500;
  3. //处理数据
  4. var dataset = [ 30 , 10 , 43 , 55 , 13 ];
  5. var pie = d3.layout.pie();
  6. var piedata = pie(dataset);
  7.  
  8. var svg = d3.select(".column")
  9. .append("svg")
  10. .attr("width", width)
  11. .attr("height", height);
  12.  
  13. //外半径
  14. var outerRadius = 150;
  15. //内半径,为0则中间没有空白
  16. var innerRadius = 30;
  17.  
  18. var arc = d3.svg.arc() //弧生成器
  19. .innerRadius(innerRadius) //设置内半径
  20. .outerRadius(outerRadius); //设置外半径
  21.  
  22. //颜色比例尺
  23. var color = d3.scale.category10();
  24. //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)];
  25. var arcs = svg.selectAll("g")
  26. .data(piedata)
  27. .enter()
  28. .append("g")
  29. .attr("transform","translate("+ (width/2) +","+ (width/2) +")");
  30.  
  31. arcs.append("path")
  32. .attr("fill",function(d,i){
  33. return color(i);
  34. })
  35. .attr("d",function(d){
  36. return arc(d);
  37. });
  38.  
  39. arcs.append("text")
  40. .attr("transform",function(d){
  41. return "translate(" + arc.centroid(d) + ")";
  42. })
  43. .attr("text-anchor","middle")
  44. .text(function(d){
  45. return d.data;
  46. });

折线图

  1. var width=500;
  2. var height=500;
  3.  
  4. var dataset=[
  5. {
  6. country:"china",
  7. gdp:[[2000,11920],[2001,13170],[2002,14550],
  8. [2003,16500],[2004,19440],[2005,22870],
  9. [2006,27930],[2007,35040],[2008,45470],
  10. [2009,51050],[2010,59490],[2011,73140],
  11. [2012,83860],[2013,103550],]
  12. },
  13. {
  14. country:"japan",
  15. gdp:[[2000,47310],[2001,41590],[2002,39800],
  16. [2003,43020],[2004,46550],[2005,45710],
  17. [2006,43560],[2007,43560],[2008,48490],
  18. [2009,50350],[2010,54950],[2011,59050],
  19. [2012,59370],[2013,48980],]
  20. },
  21. ];
  22.  
  23. var padding={top:70, right:70, bottom: 70, left:70};
  24. var gdpmax=0;
  25. for(var i=0;i<dataset.length;i++){
  26. //d3.max求解gdp最大值
  27. var currGdp=d3.max(dataset[i].gdp,function(d){
  28. return d[1];
  29. });
  30. if(currGdp>gdpmax)
  31. gdpmax=currGdp;
  32. }
  33. //创建x y轴
  34. var xScale=d3.scale.linear()
  35. .domain([2000,2013])
  36. .range([0,width-padding.left-padding.right]);
  37.  
  38. var yScale=d3.scale.linear()
  39. .domain([0,gdpmax*1.1])
  40. .range([height-padding.bottom-padding.top,0]);
  41.  
  42. //创建一个直线生成器为了访问数组数据
  43. var linePath=d3.svg.line()
  44. .x(function(d){
  45. return xScale(d[0]);
  46. })
  47. .y(function(d){
  48. return yScale(d[1]);
  49. })
  50. .interpolate("basis");//插值模式
  51. //定义两个颜色
  52. var colors=[d3.rgb(0,0,255),d3.rgb(0,255,0)];
  53.  
  54. var svg=d3.select(".column")
  55. .append("svg")
  56. .attr("width",width)
  57. .attr("height",height);
  58.  
  59. svg.selectAll("path")
  60. .data(dataset)
  61. .enter()
  62. .append("path")
  63. .attr("transform","translate("+padding.left+","+padding.top+")")
  64. .attr("d",function(d){
  65. return linePath(d.gdp);
  66. })
  67. .attr("fill","none")
  68. .attr("stroke-width",3)
  69. .attr("stroke",function(d,i){
  70. console.log(colors[i]);
  71. return colors[i];
  72. });
  73.  
  74. //调整xy的位置
  75. var xAxis=d3.svg.axis()
  76. .scale(xScale)
  77. .ticks(5)
  78. .tickFormat(d3.format("d"))
  79. .orient("bottom");
  80.  
  81. var yAxis=d3.svg.axis()
  82. .scale(yScale)
  83. .orient("left");
  84.  
  85. //添加一个g用于放x轴
  86. svg.append("g")
  87. .attr("class","axis")
  88. .attr("transform","translate("+padding.left+","+(height-padding.top)+")")
  89. .call(xAxis);
  90.  
  91. svg.append("g")
  92. .attr("class","axis")
  93. .attr("transform","translate("+padding.left+","+padding.top+")")
  94. .call(yAxis);

柱形图

  1. var width = 400;
  2. var height = 400;
  3.  
  4. var dataset = [10, 20, 30, 50, 45, 60, 18];
  5. var padding = {left: 30, right: 30, top: 20, bottom: 20};
  6.  
  7. var svg = d3.select(".column2").append("svg").attr("width", width).attr("height", height);//添加画布
  8.  
  9. //xy轴
  10. var xScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0, width - padding.left - padding.right]);
  11. var yScale = d3.scale.linear().domain([0, d3.max(dataset)]).range([height - padding.top - padding.bottom, 0]);
  12. var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
  13. var yAxis = d3.svg.axis().scale(yScale).orient("left");
  14.  
  15. //添加矩形元素
  16. var rects = svg.selectAll(".myRect")
  17. .data(dataset)
  18. .enter()
  19. .append("rect")
  20. .attr("class", "myRect")
  21. .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  22. .attr("x", function (d, i) {
  23. return xScale(i) + 2;
  24. })
  25. .attr("y", function (d, i) {
  26. return yScale(d);
  27. })
  28. .attr("width", function (d, i) {
  29. return xScale.rangeBand() - 2;
  30. })
  31. .attr("height", function (d, i) {
  32. return height - padding.top - padding.bottom - yScale(d);
  33. })
  34. .attr("fill", "steelblue");
  35.  
  36. //添加文字元素
  37. var texts = svg.selectAll(".myText")
  38. .data(dataset)
  39. .enter()
  40. .append("text")
  41. .attr("class", "myText")
  42. .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  43. .attr("x", function (d, i) {
  44. return xScale(i) + 2;
  45. })
  46. .attr("y", function (d, i) {
  47. return yScale(d);
  48. })
  49. .attr("width", function (d, i) {
  50. return (xScale.rangeBand() - 4) / 2;
  51. })
  52. .attr("height", function (d, i) {
  53. return 20;
  54. }).text(function (d) {
  55. return d;
  56. })
  57.  
  58. //添加坐标轴
  59. svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
  60. .call(xAxis);
  61. svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  62. .call(yAxis);

d3.js实现柱形图,饼图以及折现图的更多相关文章

  1. vue+echarts实现可拖动节点的折现图(支持拖动方向和上下限的设置)

    本篇文档主要是利用echarts实现可拖动节点的折现图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c= ...

  2. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

  3. 【 D3.js 高级系列 — 2.0 】 捆图

    捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbo ...

  4. 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

    本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和 ...

  5. 【 D3.js 进阶系列 — 2.2 】 力学图的參数

    力学图的布局中有非常多參数.本文将逐个说明. D3 中的力学图布局是使用韦尔莱积分法计算的.这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中. 定义布局的代码例如以下: ...

  6. 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

    机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...

  7. 【 D3.js 入门系列 --- 9.3 】 弦图生产

    我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.例如以下图: ...

  8. echarts折现图配置

    js引用和div容器 <div id="container" style="height: 100%"></div> <scrip ...

  9. d3.js(v5.7)力导向图(关系图谱)

    先上图,后面再一一解释: ok,为了方便理解,这里我就没有用之前封装的automatch函数来将数据和节点匹配了,如果你对enter(),exit()函数还不是很理解的话,请移步至我之前写的<n ...

随机推荐

  1. SYN4104型 数字网同步时钟

    SYN4104型 数字网同步时钟 产品概述 SYN4104型数字网同步时钟是由西安同步电子科技有限公司精心设计.自行研发生产的一款高精度锁相时钟频率源,接收GPS信号,使恒温晶振输出频率同步于GPS卫 ...

  2. 04-MySQL中的数据类型

    1 整体说明MYsql的数据类型#1. 数字:    整型:tinyint  int  bigint    小数:        float :在位数比较短的情况下不精准        double ...

  3. 预习初三物理电学部分的心得体会&知识梳理(持续更新)

    DAY 1 一.摩擦起电 用摩擦的方式使两个不同的物体带电的现象. 二.带电体 如果一个物体能够吸引轻小物体,我们就说这个物体带电或者说带了电荷. (注:吸引轻小物体是作用效果,带电体对任何物体都有吸 ...

  4. 什么是 VxLAN?

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. VLAN 和 ...

  5. 最牛MongoDB灾难恢复(WiredTiger.wt文件损坏,Mongo无法启动)

    WiredTiger.wt文件是mongoDB的元数据文件,存储了其他数据库表的元数据信息.笔者最近遇到了WiredTiger.wt文件损坏的情况,MongoDB无法启动,数据库中的重要数据危在旦夕. ...

  6. 并发编程-concurrent指南-阻塞队列-延迟队列DelayQueue

    DelayQueue是一个无界的BlockingQueue,用于放置实现了Delayed接口的对象,其中的对象只能在其到期时才能从队列中取走.这种队列是有序的,即队头对象的延迟到期时间最长.注意:不能 ...

  7. POJ 2778:DNA Sequence(AC自动机构造矩阵)

    http://poj.org/problem?id=2778 题意:有m个病毒DNA,问构造一个长度为n的不带病毒DNA的字符串可以有多少种. 思路:看到这题有点懵,想了挺久题解的思路. 使用AC自动 ...

  8. Codeforces 730J:Bottles(背包dp)

    http://codeforces.com/problemset/problem/730/J 题意:有n个瓶子,每个瓶子有一个当前里面的水量,还有一个瓶子容量,问要把所有的当前水量放到尽量少的瓶子里至 ...

  9. RabbitMQ windows 安装后 此时不应有 \RabbitMQ。

    在安装过程中,如果细心实际上在安装的细节显示starting Service后就已经提示这个问题,实际上就是没有注册到RabbitMQ这个服务. 在研究了很久之后才发现原来是安装路径的问题,原先是安装 ...

  10. Linux 操作系统及其组成,shell命令

    Linux 操作系统及其组成 操作系统的作用 操作系统(OS)是管理计算机硬件与软件资源的计算机程序,同时也是计算机系统的内核与基石.操作系统需要处理如管理与配置内存.决定系统资源供需的优先次序.控制 ...