使用d3.js旋转饼图

时间:2015-05-22 08:43:55

标签: javascript d3.js

我是d3.js的新手我能够创建圆环图并且我能够旋转图表但我不希望图表上的标签旋转。任何人都可以帮助如何进行。我该如何确保图表上的标签不会旋转

    var dataset = [
        {
            count: 10
        },
        {
            count: 20
        },
        {
            label: 'Cantaloupe',
            count: 30
        }
    ];

    var width = 360;
    var height = 360;
    var radius = 100;

    var color = d3.scale.ordinal()
        .range(["red", "blue", "green"]);
    var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + (width / 2) +
            ',' + (height / 2) + ')');

    var arc = d3.svg.arc()
        .innerRadius(radius - 60)
        .outerRadius(radius);

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

    var arcs = svg.selectAll('.arc')
        .data(pie(dataset))
        .enter()
        .append('g')
        .attr("class", "arc");
    arcs.append("path")
        .attr("d", arc)
        .attr("fill", function (d) {
            return color(d.data.count);
        })
        .on("click", function (d) {
            var curAngle = 180;
            svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(" + curAngle + ")");

        });
    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.count
        });

0 个答案:

没有答案