Drawing pie in d3.js(without using pie layout) - by Atul

by Atul

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<h2>
    Drawing pie in d3.js(without using pie layout) - by Atul
</h2>
<div id="mainDiv" style="width:400px; height:300px">
    <div id="drawAreaOuter" style="width:100%; height:100%; float:left; ">
        <div id="drawArea" style="width:100%; height:100%; border:1px solid gray">
        </div>
    </div>
</div>

JavaScript

function DrawArc(svg, cx, cy, r, startAngle, endAngle, text, color) {
        //startAngle += 0.1;
        var rad = (startAngle * Math.PI) / 180.0;
        var x1 = cx + r * Math.cos(rad);
        var y1 = cy + r * Math.sin(rad);

        //endAngle -= 0.1;
        var rad = (endAngle * Math.PI) / 180.0;
        var x2 = cx + r * Math.cos(rad);
        var y2 = cy + r * Math.sin(rad);

        var id = color;
        id = id.replace('#', '');
        id = 'color_' + id;
        var data = [id];

        pathString = 'M' + x1 + ',' + y1 + ' ' + 'A' + r + ',' + r + ' 0 0,1 ' + x2 + ',' + y2 + ' L ' + cx + ',' + cy + ' Z ';
        var path = svg
            .append('path')
            .attr('d', pathString)
            .attr('id', id)
            //.style('stroke', 'color')
            .style('fill', color)
        ;

        if (Math.abs(startAngle - endAngle) > 20) {
            var middleAngle = startAngle + (endAngle - startAngle)/2;
            var rad = (middleAngle * Math.PI) / 180.0;
            var x = cx + 0.75 * r * Math.cos(rad);
            var y = cy + 0.75 * r * Math.sin(rad);

            svg.append('text')
                .attr('x', x)
                .attr('y', y)
                    .attr("text-anchor", "middle")
                    .attr("dy", ".35em")
                    .text(text + '%');
        }
    }


    var gContainerId, gCanvasId, gTopGroupId;
    var svg;

    function Initialize(containerId) {
        var height = document.getElementById(containerId).clientHeight;
        var width = document.getElementById(containerId).clientWidth;
        gContainerId = containerId;
        gCanvasId = containerId + '_canvas';
        gTopGroupId = containerId + '_topGroup';
        svg = d3.select("#" + containerId).append("svg")
            .attr({"id" : gCanvasId, "width" : width , "height": height })
            .append("g")
            .attr({ "id": gTopGroupId, 'x': 0, 'y': 0, "width": width, "height": height })
        ;
        startAngle...