Question

我的目标是创建一个显示75% - 90% accuracy rate的动画圆环图。为此，我开始使用下面的代码，但我想做一些调整：

我想自定义每个节点输出的颜色图表（我添加了变量section_path_fill_colors）。目前的代码我选择随意选择颜色。
我想在甜甜圈中间添加一个静态文本标签 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);

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

1 个答案: