时间戳

首页 > 解决方案 > 旋转d3.js饼图中的文字并交替填充颜色

d3.js - 旋转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 色代码方案。但它不会显示其余的颜色。有没有其他方法可以改变颜色？

标签： d3.js

解决方案

使用序数比例时，您永远不应该依赖比例从使用中推断域的能力：一个好的做法是始终显式设置域。

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

如果您想为这些相同的值使用不同的颜色，请改用索引：

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

PS：关于文本，请避免在一个问题中提出2个或更多不同的问题。编辑您的问题，只留下 1 个问题，您可以随时发布其他问题的新问题。

推荐阅读