D3.js Donut Chart ändern Sie die Farben der Knoten und fügen Sie dem mittleren Textfeld Text hinzu

Question

Mein Ziel ist es, ein animiertes Donut-Diagramm zu erstellen, das 75% - 90% accuracy rate anzeigt. Dazu habe ich unten mit dem Code gestartet, aber ich möchte ein paar Veränderungen machen:

1. Ich möchte die Farben jedes Knotens ausgegeben durch die Diagramm anpassen (I die Variable hinzugefügt haben Abschnitt_Pfadefill_colors). Derzeit wählt der Code einfach zufällige Farben, die ich glaube.
2. Ich möchte ein statisches Textlabel in der Mitte des Donuts 75% - 90% hinzufügen (Ich habe die Variable static_label hinzugefügt). Derzeit sind die Labels an jeden Knoten angehängt.

Kann mir jemand helfen, dies zu erreichen?

UPDATE:

Ich konnte die Färbung von Knoten mit lösen:

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

Jetzt müssen nur helfen, das statische Label in der Mitte

JS Einstellung:

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

Tun Sie einfach dies:

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