利用d3js绘出环形百分比环
利用d3js绘出环形百分比环
(function() {
var numberData = [{
value : 0.334,
text : "33.4%",
color : "#fd12000",
id : 1
}, {
value : 0.666,
text : "66.6%",
color : "#3611aa",
id : 2
}]; drawCir("#container", numberData, 170, 170); function drawCir(selector, data, height ,width) {
var radius = Math.min(width, height) / 2, spacing = 45; fields = data; var arc = d3.svg.arc().startAngle(0.5 * Math.PI).endAngle(function(d) {
var direction = (d.id % 2 == 0) ? -1 : 1;
return 0.5 * Math.PI + direction * d.value * 2 * Math.PI;
}).innerRadius(function(d) {
return radius - spacing;
}).outerRadius(function(d) {
return radius;
}); var svg = d3.select(selector).append("svg").attr("width", width).attr("height", height).append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var field = svg.selectAll("g").data(fields).enter().append("g"); field.append("path");
field.append("text"); field = field.each(function(d) {
this._value = d.value;
}).data(fields).each(function(d) {
d.previousValue = this._value;
}); field.select("path").transition().attrTween("d", arcTween).duration(1000).style("fill", function(d) {
return d.color;
}); field.select("text").text(function(d) {
return d.text;
}).style("stroke", "white").attr("transform", function(d) {
var direction = (d.id % 2 == 0) ? -1 : 1;
return "rotate(" + direction * 360 * d.value / 2 + ")" + "translate(" + (radius - spacing / 2) + ",0)" + "rotate(" + (d.value < .5 ? -0 : 180) + ")"
}); function arcTween(d) {
var i = d3.interpolateNumber(0, d.value);
return function(t) {
d.value = i(t);
return arc(d);
};
} } })();
最终效果:
d3js资源:
<script src="http://d3js.org/d3.v3.js"></script>
利用d3js绘出环形百分比环的更多相关文章
- canvas动画之动态绘出六边形
先上 demo: http://en.jsrun.net/W5iKp/show 这两天我一直在研究这个动画,花了大量的时间来想是如何实现的, 一开始我是想在进入 canvas 时按时间来用 lineT ...
- OpenCV—Python 轮廓检测 绘出矩形框(findContours\ boundingRect\rectangle
千万注意opencv的轮廓检测和边缘检测是两码事 本文链接:https://blog.csdn.net/wsp_1138886114/article/details/82945328 1 获取轮廓 O ...
- 利用python画出动态高优先权优先调度
之前写过一个文章. 利用python画出SJF调度图 动态高度优先权优先调度 动态优先权调度算法,以就绪队列中各个进程的优先权作为进程调度的依据.各个进程的优先权在创建进程时所赋予,随着进程的推进或其 ...
- 乒乓球队比赛,甲队有abc三人,乙队有xyz三人。 抽签得出比赛名单:a不和x比,c不和x,z比, 利用集合求出比赛名单
import java.util.HashMap; import java.util.Map; /** * 乒乓球队比赛,甲队有abc三人,乙队有xyz三人. * 抽签得出比赛名单:a不和x比,c不和 ...
- 利用LineRenderer画出一个圆,类似于lol中的攻击范围
http://www.unity蛮牛.com/blog-5945-1409.html 本人大四狗,学unity半年有余,写此文章纯粹记录自己的心得. 废话不多说,进入主题.... 效果如图: 首先要理 ...
- 再谈Cognos利用FM模型来做同比环比
很早之前已经讲过 <Cognos利用DMR模型开发同比环比>这篇文章里说的是不利用过滤器,而是采用 except (lastPeriods (-9000,[订单数据分析].[日期维度].[ ...
- 利用FluidMoveBehavior制作出手机通讯录平滑的效果
最近学习Blend,原来Blend制作动画等效果非常棒.下面演示一下FluidMoveBehavior应用,利用Blend中行为中的FluidMoveBehavior制作出手机通讯录平滑的效果 1.在 ...
- MergeSort归并排序和利用归并排序计算出数组中的逆序对
首先先上LeetCode今天的每日一题(面试题51. 数组中的逆序对): 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. ...
- 利用python画出SJF调度图
最先发布在csdn.本人原创. https://blog.csdn.net/weixin_43906799/article/details/105510046 SJF算法: 最短作业优先(SJF)调度 ...
随机推荐
- kaptcha的和springboot一起使用的简单例子
https://blog.csdn.net/xiaoyu19910321/article/details/79296030
- PowerBuilder -- 未公开函数
原文:http://blog.csdn.net/happymagic/article/details/51077322 @.已知一个DW中的某列的列名(在字符串变量中),以获得这个列对象的DWO 方法 ...
- WPF自定义选择年月控件详解
本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下 封装了一个选择年月的控件,XAML代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
- C#抓取网面上的html内容(JS动态生成的无法抓取)
抓取内容的代码: /// </summary> /// <param name="url">路径URL</param> /// <para ...
- android菜鸟学习笔记5----第一个android程序
程序功能:点击一个按钮,然后弹出一个提示信息 Step 1:在eclipse中新建一个android application project,在创建过程中不勾选create activity,这样就创 ...
- haproxy + keepalived 实现web 双主模型的高可用负载均衡
参考文章 http://xz159065974.blog.51cto.com/8618592/1405812 http://blog.chinaunix.net/uid-25266990-id-398 ...
- Intellij Idea生成JavaDoc
JavaDoc是一种将注释生成HTML文档的技术,生成的HTML文档类似于Java的API,易读且清晰明了.在简略介绍JavaDoc写法之后,再看一下在Intellij Idea 中如何将代码中的注释 ...
- com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException: Duplicate entry '88888888' for key 'PRIMARY'
严重: Servlet.service() for servlet jsp threw exceptioncom.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityC ...
- html5/CSS3鼠标滑过图片特效插件
在线演示 本地下载
- WIFI模块ESP8266的使用指南【转】
本文转载自:http://www.itdadao.com/articles/c15a814052p0.html 本文主要对讲述ESP8266模块硬件连接工作,以及作为服务器和客户端情况下的配置实现的详 ...