饼图

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. Linux使用daemontools

    功能: 在使用memcached时候,怕因为一些不可预知的因素导致memcached进程死掉,而又不能及时的发现重启,可以通过daemontools来管理memcached的启动,当memcached ...

  2. Python基础,day3

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法及特性 如何不重复代码,其实很 ...

  3. PATB 1019. 数字黑洞 (20)

    一个神奇的数字. 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定任一个各位数字不完全相同的4位正整数,如果我 ...

  4. SHELL 中条件语句的运用 if for 条件测试语句

    if条件测试语句可以让脚本根据实际情况自动执行相应的命令.从技术角度来讲,if语句分为单分支结构.双分支结构.多分支结构:其复杂度随着灵活度一起逐级上升. if条件语句的单分支结构由if.then.f ...

  5. VIM技巧, .vimrc文件

    将 .vimrc文件上传到用户家目录下 文件内容如下: autocmd BufNewFile *.py,*.cc,*.sh,*.java exec ":call SetTitle()&quo ...

  6. [apue] 使用 poll 检测管道断开

    一般使用 poll 检测 socket 或标准输入时,只要指定 POLLIN 标志位,就可以检测是否有数据到达,或者连接断开: ]; fds[].fd = STDIN_FILENO; fds[].ev ...

  7. python学习 -女神或者男神把微信消息撤回后好慌,有了这个妈妈再也不担心你看不到女神或者男神撤回的消息了(超详解)

    简介 有时候在忙工作,女朋友发了一个消息,就撤回了,但是人天生的都有一颗好奇心,而且在当今这个时代找个女朋友不容易,一个程序猿找一个女朋友更是不容易的.人家好不容易跟你,你还不得把人家当老佛爷侍候着, ...

  8. sql 中 并集union和union all的使用区别

    union  操作符用于合并两个或多个 SELECT 语句的结果集,并且去除重复数据,按照数据库字段的顺序进行排序. 例 SELECT NAME FROM TABLE1UNIONSELECT EMP_ ...

  9. Golang之mirco框架部分浅析

    在实习中使用 micro 框架,但是挺多不懂的,看了部分源码搞懂了一些,还是有一些比较复杂没搞懂. 第一部分:初始化 service 并修改端口 main.go // waitgroup is a h ...

  10. POJ 2679:Adventurous Driving(SPFA+DFS)

    http://poj.org/problem?id=2679 Adventurous Driving Time Limit: 1000MS   Memory Limit: 65536K Total S ...