D3.js甜甜圈圖表更改節點顏色並將文本標籤添加到中間

Question

我的目標是創建一個顯示75% - 90% accuracy rate的動畫圓環圖。爲此，我已經開始與下面的代碼，但我想作一些調整：

1. 我想自定義由 圖表每個節點輸出的顏色（我已經添加了變數section_path_fill_colors）。目前代碼 只是選擇隨機顏色，我相信。
2. 我想在甜甜圈中間添加一個靜態文本標籤 75% - 90%（我已經添加了變量static_label）。 當前標籤附加到每個節點。

有人可以幫我完成嗎？

UPDATE：

我能夠解決節點與着色：

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);