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