Question

这是我的代码，它将为给定的data[]创建一个饼图。点击按钮，我希望旋转饼图。我怎么能这样做？

<!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>

使用d3.js旋转饼图

0 个答案: