如何旋转 d3 图表以及如何从 -90 度开始绘制饼图？

Question

我使用 d3 js 和 padding 制作了一个圆圈。现在，我希望这张图表从 -90 角度开始

我也附上了我的代码和输出。我还附上了我的预期输出。您可以在这里查看。

<style type="text/css">
    body {
        font-family: sans-serif;
        margin-top: 25px;
        font-size: 18px;
    }

    .monthArc {
        fill: #cc3333;
    }

    .monthText {
        fill: #FFF;
        font-size: 34px;
        font-weight: 500;
    }
</style>

<div id="chart"></div>
<script type="text/javascript">
    var screenWidth = window.innerWidth;
    // var color = d3.scale.category20c();

    var margin = {
    left: 25,
    top: 25,
    right: 25,
    bottom: 25
    },
    width = Math.min(screenWidth, 600) - margin.left - margin.right,
    height = Math.min(screenWidth, 600) - margin.top - margin.bottom;

    //The start date number and end date number of the months in a year
    var month_space = "\x09\x20\u00A0 ";
    var monthData = [{
        month: "T"+month_space+"E"+month_space+"X"+month_space+"T"
        }, {
        month: "T"+month_space+"E"+month_space+"X"+month_space+"T"+month_space+"1"
        }
    ];

    var svg = d3.select("#chart").append("svg")
    .attr("width", (width + margin.left + margin.right))
    .attr("height", (height + margin.top + margin.bottom))
    .attr("class", "wrappersvg")
    .append("g").attr("class", "wrapper")
    .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

    //Creates a function that makes SVG paths in the shape of arcs with the specified inner and outer radius 
    var arc = d3.svg.arc()
    .innerRadius(width * 0.9 / 2)
    .outerRadius(width * 0.9 / 2 + 50);

    //Creates function that will turn the month data into start and end angles
    var pie = d3.layout.pie()
    .value(function(d) {
        return 180;
    })
    .padAngle(.01)
    .sort(null);

    //Draw the arcs themselves
    svg.selectAll(".monthArc")
    .data(pie(monthData))
    .enter().append("path")
    .attr("class", "monthArc")
    .attr("id", function(d, i) {
        return "monthArc_" + i;
    })
    .attr("d", arc);

    //Append the month names within the arcs
    svg.selectAll(".monthText")
    .data(monthData)
    .enter().append("text")
    .attr("class", "monthText")
    .attr("x", 0) //Move the text from the start angle of the arc
    .attr("dy", 36) //Move the text down
    .append("textPath")
    .attr("text-anchor", "middle")
    .attr("startOffset",function(d,i){return "26%";})
    .attr("xlink:href", function(d, i) {
        return "#monthArc_" + i;
    })
    .text(function(d) {
        return d.month;
    });
</script>

我怎样才能做到这一点？

Answer 1

对于 和startAngle，endAngle您必须添加四分之一周长，即Math.PI/2：

.startAngle(function(d) { return d.startAngle + Math.PI/2; })
.endAngle(function(d) { return d.endAngle + Math.PI/2; });

这是包含您的代码的演示片段：

.startAngle(function(d) { return d.startAngle + Math.PI/2; })
.endAngle(function(d) { return d.endAngle + Math.PI/2; });

var screenWidth = window.innerWidth;
//          var color = d3.scale.category20c();

            var margin = {
            left: 25,
            top: 25,
            right: 25,
            bottom: 25
            },
            width = Math.min(screenWidth, 600) - margin.left - margin.right,
            height = Math.min(screenWidth, 600) - margin.top - margin.bottom;

            //The start date number and end date number of the months in a year
            var month_space = "\x09\x20\u00A0 ";
            var monthData = [{
                month: "T"+month_space+"E"+month_space+"X"+month_space+"T"
                }, {
                month: "T"+month_space+"E"+month_space+"X"+month_space+"T"+month_space+"1"
                }
            ];

            var svg = d3.select("#chart").append("svg")
            .attr("width", (width + margin.left + margin.right))
            .attr("height", (height + margin.top + margin.bottom))
            .attr("class", "wrappersvg")
            .append("g").attr("class", "wrapper")
            .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

            //Creates a function that makes SVG paths in the shape of arcs with the specified inner and outer radius 
            var arc = d3.svg.arc()
            .innerRadius(width * 0.9 / 2)
            .outerRadius(width * 0.9 / 2 + 50)
						.startAngle(function(d) { return d.startAngle + Math.PI/2; })
						.endAngle(function(d) { return d.endAngle + Math.PI/2; });

            //Creates function that will turn the month data into start and end angles
            var pie = d3.layout.pie()
            .padAngle(0.02)
            .value(function(d) {
                return 180;
            }).sort(null);

            //Draw the arcs themselves
            svg.selectAll(".monthArc")
            .data(pie(monthData))
            .enter().append("path")
            .attr("class", "monthArc")
            .attr("id", function(d, i) {
                return "monthArc_" + i;
            })
            .attr("d", arc);

            //Append the month names within the arcs
            svg.selectAll(".monthText")
            .data(monthData)
            .enter().append("text")
            .attr("class", "monthText")
            .attr("x", 0) //Move the text from the start angle of the arc
            .attr("dy", 36) //Move the text down
            .append("textPath")
            .attr("text-anchor", "middle")
            .attr("startOffset",function(d,i){return "26%";})
            .attr("xlink:href", function(d, i) {
                return "#monthArc_" + i;
            })
            .text(function(d) {
                return d.month;
            });

body {
                font-family: sans-serif;
                margin-top: 25px;
                font-size: 18px;
            }

            .monthArc {
                fill: #cc3333;
            }

            .monthText {
                fill: #FFF;
                font-size: 34px;
                font-weight: 500;
            }