D3.js donut chart 更改节点颜色并将文本标签添加到中间

Question

我的目标是创建一个动画圆环图，显示 75% - 90% accuracy rate .为此，我从下面的代码开始，但我想进行一些调整:

我想自定义每个节点输出的颜色
图表(我添加了变量 section_path_fill_colors)。目前代码
我相信只是选择随机颜色。

我想在 donut 中间添加一个静态文本标签75% - 90% (我已经添加了变量 static_label)。
目前，标签附加到每个节点。

有人可以帮我完成这个吗？

更新:

我能够通过以下方式解决节点的着色问题:

var color = d3.scale.ordinal()
  .domain(["one", "two", "three"])
  .range(["#ffffff" , "#d1d2d4" , "#17afd1"]);

现在只需要帮助在中间设置静态标签

JS:

var static_label = '75% - 90%';

var employees = [
    {dept: '', count : 75},
    {dept: '', count : 15},
    {dept: '', count : 10}
];

var color = d3.scale.ordinal()
.domain(["one", "two", "three"])
.range(["#ffffff" , "#d1d2d4" , "#17afd1"]);

var maxWidth = 200;
var maxHeight = 200;
var outerRadius = 100;
var ringWidth = 20;

function checkEndAll(transition, callback) {
    var n = 0;
    transition
    .each(function() { ++n; })
    .each("end", function() {
    if (!--n) callback.apply(this, arguments);
    });
}    

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

//var color = d3.scale.category10();
var arc = d3.svg.arc();

function tweenPie(finish) {
    var start = {
            startAngle: 0,
            endAngle: 0
        };
    var i = d3.interpolate(start, finish);
    return function(d) { return arc(i(d)); };
}
arc.outerRadius(config.outerRadius || outerRadius)
    .innerRadius(config.innerRadius || innerRadius);

// Remove the previous ring
d3.select(config.el).selectAll('g').remove();

var svg = d3.select(config.el)
    .attr({
        width : maxWidth,
        height: maxHeight
    });

// Add the groups that will hold the arcs
var groups = svg.selectAll('g.arc')
.data(pie(config.data))
.enter()
.append('g')
.attr({
    'class': 'arc',
    'transform': 'translate(' + outerRadius + ', ' + outerRadius + ')'
});

// Create the actual slices of the pie
groups.append('path')
.attr({
    'fill': function (d, i) {
        return color(i);
    }
})
.transition()
.duration(config.duration || 1000)
.attrTween('d', tweenPie)
.call(checkEndAll, function () {

    // Finally append the title of the text to the node
    groups.append('text')
    .attr({
        'text-anchor': 'middle',
        'transform': function (d) {
            return 'translate(' + arc.centroid(d) + ')';
        }
    })
    .text(function (d) {
        // Notice the usage of d.data to access the raw data item
        return d.data.dept;
    });
});
}

// Render the initial ring
drawAnimatedRingChart({
el: '.animated-ring svg',
outerRadius: outerRadius,
innerRadius: outerRadius - ringWidth,
data: employees
});

Answer 1

只需这样做:

svg.append('text')
  .attr({
    x: outerRadius,
    y: outerRadius,
    'text-anchor': 'middle
  })
  .text(static_label);