饼图

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实现柱形图,饼图以及折现图的更多相关文章

  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. 修改系统的shell

    一:修改系统的shell     (选用zsh解释器,相对于bash,对它有很好的兼容性,而且功能上更加强大)    1.查看系统中安装的shell      cat  /etc/shells     ...

  2. 关于Git 的管理凭据操作

    1.桌面-->2.我的电脑-->3.右击选择属性-->4.控制面板主页-->5.在用户账户和家庭安全下,选择添加或删除用户账户-->转到“主用户账户”页面-->6. ...

  3. 转:Mongoose使用操作

    一般我们不直接用MongoDB的函数来操作MongoDB数据库 Mongose就是一套操作MongoDB数据库的接口.   连接数据库 // mongoose 链接var mongoose = req ...

  4. 前端学习之Bootstrap学习

    一,Bootstrap简介 在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...

  5. 记一次腾讯IEG面试失败经历

    如果这是一次成功的经历,估计浏览量不会低.无奈本人能力有限,而且一直在实习,准备时间与面试经验有限导致此次失败,不过,失败也是一种宝贵的经验,我希望也相信这里能给大家一些比较珍贵的经验,废话不多说,上 ...

  6. 【实战】SpringBoot + KafKa

    1.配置pom包 <dependency> <groupId>org.springframework.kafka</groupId> <artifactId& ...

  7. Mac sublime text3 安装插件

    一.下载Mac版sublime text3 下载地址:http://www.pc6.com/mac/120663.html(参考) 2.安装后打开 1.在界面的最上端找到tools(英文版),选择第一 ...

  8. 【React】react学习笔记03-React组件对象的三大属性-state

    今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...

  9. C# Invoke

    最近在看一个项目,其中用到异步进程——控件Invoke,这里将具体用法介绍如下: 以进度条为例: //声明委托 delegate void SetProgressBarEnabledDelegate( ...

  10. Flutter学习笔记(3)--Dart变量与基本数据类型

    一.变量 在Dart里面,变量的声明使用var.Object或Dynamic关键字,如下所示: var name = ‘张三’: 在Dart语言里一切皆为对象,所以如果没有将变量初始化,那么它的默认值 ...