Rotating pie chart using d3.js

Question

This is my code which will create a pie chart for the given data[]. On clicking on the button I want that pie chart to rotate. How can i do that?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>PIE Chart</title>
        <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>

        <button name="clockwise" id="cw">clockwise</button>
        <button name="anticlockwise" id="acw">anticlockwise</button>

        <script>


            var data = [10, 50, 80, 60, 100, 25];
            var r = 300;

            var color = d3.scale.ordinal()
                    .range(["#B2786A", "#6B6B69", "#E6A28D", "#E6D374", "steelblue", "#B6F1FF"]);

            var canvas = d3.select("body").append("svg").attr("width", 1500).attr("height", 1500);

            var group = canvas.append("g").attr("transform", "translate(600,300)");

            var arc = d3.svg.arc().innerRadius(0).outerRadius(r)


            var pie = d3.layout.pie().value(function (d) {
                return d;
            });

            var arcs = group.selectAll(".arc").data(pie(data)).enter().append("g").attr("class", "arc");


            arcs.append("path").attr("d", arc).attr("fill", function (d) {
                return color(d.data);
            });

            arcs.append("text")
                    .attr("transform", function (d) {
                        return "translate(" + arc.centroid(d) + ")";
                    })
                    .attr("text-anchor", "middle")
                    .attr("font-size", "1.5em")
                    .text(function (d) {
                        return d.data;
                    });

            document.getElementById("cw").onclick =
                    function clockwise() {
                    }
        </script>
    </body>
</html>

Take a look at this question and see if that helps: http://stackoverflow.com/questions/14872687/ — kaz, May 21 '15 at 12:29
What you are currently able to achieve with the above code and where are you stuck ? Providing this info would make it easier for others to help. — Ankit, May 21 '15 at 12:39
from this code i can get pie chart for that data.. i need to rotate that on some click event — Kiran, May 21 '15 at 13:15

Rotating pie chart using d3.js

0 Answers0