旋转d3.js饼图中的文本并交替填充颜色

我有这个d3代码，用于在d3.js中绘制饼图

/** START OF PIE CHART */

        var svgCirWidth = 600, svgCirHeight = 300, radius = Math.min(svgCirWidth, svgCirHeight) / 2;

        const pieContainer = d3.select("#pieChart")
            .append("svg")
            .attr("width", svgCirWidth)
            .attr("height", svgCirHeight);

        //create group element to hold pie chart

        var g = pieContainer.append("g")
            .attr("transform", "translate(" + 250 + "," + radius + ")");

        var color = d3.scaleOrdinal(d3.schemeCategory10);

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

        var path = d3.arc()
            .outerRadius(radius)
            .innerRadius(0);

        var arc = g.selectAll("arc")
            .data(pie(data))
            .enter() //means keeps looping in the data
            .append("g");

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

        var label = d3.arc()
            .outerRadius(radius)
            .innerRadius(0);

        arc.append("text")
            .attr("transform", (d) => {
                return "translate(" + label.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text((d) => {
                return d.data.region_iso_code + ":" + d.data.total_up_percentage + "%"
            });

这是我做馅饼的结果

---

如您所见，文本相互重叠。我想知道如何旋转文本以便更容易阅读。我曾尝试在控制台中编辑转换，但它不起作用，它只会使文本向上或向下移动。我还想知道我的馅饼的颜色怎么了。它粘在橘子上了。在我读到的关于这个

schemeCategory10

的文档中说，它是一个10色代码的方案。但它不会显示其余的颜色。有没有其他方法可以改变颜色？

当使用顺序刻度时，你永远不应该依赖刻度的能力来从使用情况推断域：一个好的做法是始终显式设置域

通过设置域，您将很快看到这确实是预期的行为：所有橙色切片都具有相同的值，即

100

如果要为那些相同的值使用不同的颜色，请使用索引：

.attr("fill", function (_, i) {
    return color(i);
})

---

关于课文，请避免在一个问题中问两个或更多不同的问题。编辑您的问题，只留下一期，您可以随时发布新问题和其他问题