利用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>